将HTML模板转换为WordPress主题问题

时间:2015-05-05 12:11:52

标签: php html css wordpress

我一直致力于将html简单模板转换为WordPress主题,因此我将文件夹创建为xampp - htdocs - wp-content - themes并在此文件夹中创建8个文件

footer.php,functions.php,header.php,index.php,page.php     sidebar.php,single.php,style.css

在页脚文件中添加以下代码: -

  </div>

                    <?php get_sidebar();?>              
                    <div style="clear: both;">&nbsp;</div>
                    </div>
                </div>
            </div>
            <!-- end #page --> 
        </div>
        <div id="footer">
            <p>Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>.</p>
        </div>
        <!-- end #footer -->
        </body>
        </html>

并在标题文件中添加此代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php bloginfo('title'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
    <div id="header-wrapper">
        <div id="header">
            <div id="logo">
                <h1><a href="#"><?php bloginfo('name'); ?></a></h1>
                <p><?php bloginfo('description'); ?></p>
            </div>
        </div>
    </div>
    <!-- end #header -->
    <div id="menu">
        <?php wp_nav_menu(); ?>
    </div>
    <!-- end #menu -->
    <div id="page">
        <div id="page-bgtop">
            <div id="page-bgbtm">
                <div id="content">

并在索引文件中显示此代码

 <?php get_header(); ?>
    test
    <?php get_footer(); ?>

我转到我的管理页面,发现这是一个主题,我活跃了它。 但我发现它很空洞,我不知道有什么不对。

3 个答案:

答案 0 :(得分:1)

Wordpress主题需要至少两个文件才能工作,所以首先通过在主题文件夹中只包含两个文件来检查主题

wp-content/themes/mytheme/

style.css
index.php

在style.css文件中添加这些行

/*
Theme Name: My theme
Version: 1.0
*/

并在index.php文件中添加这些行

this is theme testing

然后运行您的wordpress网站并检查

答案 1 :(得分:1)

如果你只有空白屏幕,那么在大多数情况下,在functions.php中存在一些配置错误,你有没有任何代码?

我不确定它是否能解决您的问题,但请尝试在函数中使用wp_enqueue_style()函数,而不是在标题中回显样式。

function theme_slug_enqueue( ){
   wp_enqueue_style( 'open-sans', http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' );
   wp_enqueue_style( 'main-style', get_stylesheet_directory_uri() . 'style.css' );
}

将它放在您的functions.php中,并从标题中删除元素。 bloginfo(&#39; stylesheet_url&#39;)函数只获取你的主目录网址,你没有在我看到的任何地方调用你的主电源style.css。如果您不想使用wordpress标准排队功能,请至少尝试更改

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />

为:

<link href="<?php bloginfo('stylesheet_url') . 'style.css'; ?>" rel="stylesheet" type="text/css" media="screen" />

参考:https://codex.wordpress.org/Function_Reference/wp_enqueue_style

答案 2 :(得分:0)

您必须在主题文件夹中创建一个新文件夹。它应该看起来像这样

  • 可湿性粉剂内容

    • 主题
    • 主题名称(比如布鲁诺)

      • 的header.php
      • footer.php
      • 的index.php
      • 的style.css

现在在style.css中,添加这些注释非常重要。

/*
Theme Name: Bruno theme
Theme URI: Your site
Author: Your name
Author URI: http://yoursite.org/
Description: Some description
Version: 1.0
*/

这些评论将告诉wordpress有关您主题的所有信息

相关问题