WordPress学习(03)—— 主题开发

1、建立一个WordPress主题第一步

在wp-content文件夹中找到themes文件夹,一般在themes中有一些文件夹,它们是WordPress的官方主题,接下来在themes文件目录下创建一个新的文件夹,用来放置我们自己的主题。

2、创建style.css和index.php

style.css

style.css中写入的信息,可以在后台点击“主题详细信息”来查看

/*
Theme Name: 主题名称
Author: 作者
Author URI: https://example.com
Version: 1.0
 */

index.php:

<?php

get_header();

if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>

        <h2><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h2>

        <?php the_content() ?>

    <?php endwhile;

else :
    echo '<p>There are no posts!</p>';

endif;
?>

<?php
get_footer();

?>

have_posts() 告诉数据库中是否有任何帖子要循环;
the_post() 布尔值,返回判断have_post()的结果;true:有帖子循环; false:没有帖子循环

3、functions.php

将style.css文件包含到我们的主题中
激活或包含了自定义主题的样式表

<?php

// 引入样式
function custom_theme_assets() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );

4、创建header.php和footer.php

调用get_header()和get_footer()函数,可以覆盖默认提供的页眉和页脚布局

header.php

header.php:类似HTML语法,所有HTML标签都有一个DOCTYPE,所以在这里也要加上

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <title><?php bloginfo( 'name' ); ?></title>
    <?php wp_head() ?>
</head>

<body <?php body_class(); ?>>

<header class="site-header">
    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

<?php wp_head() ?> 确定header.php文件的< head>部分中的输出

footer.php

除了要调用wp_footer()函数外,还需要加上</ body>、</ html>标签结尾

<footer class="site-footer">
    <p><?php bloginfo( 'name' ) ?></p>
</footer>

<?php wp_footer() ?>
</body>
</html>

5、page.php 页面模板

注意:建立完page.php页面之后需先在后台→设置→阅读将您的主页显示设置成首页,文章页设置成为文章

<?php get_header(); if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="wrapper">

    <!-- CONTENT -->
    <div class="container">
        <div class="content">
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </div>
    </div>

</div>
<?php endwhile; endif; get_footer(); ?>

get_template_part($slug, $name) 函数用于调用自定义模板文件,也可以引入自定义名字的文件
$slug (必须) 通用的模板名
(字符串)要引入的模板的文件名,不包括后缀名 .php,也就是如果需要引入当前主题根目录的 loop.php 文件 $slug 填写 “loop” 即可。
$name (可选) 指定的模板名
(字符串)要引入的模板的文件的副文件名,如果要引入当前主题根目录的 loop-img.php 文件 $slug 参数填写 “loop”,$name 参数填写 “img”。

6、single.php 个人帖子模板

single.php这是一个单独的帖子页面。这将是page.php的完全重复

<?php get_header(); ?>

    <div class="row">
        <div class="col-sm-12">

            <?php
                if ( have_posts() ) : while ( have_posts() ) : the_post();
            ?>

            <div class="blog-post">
                <h2 class="blog-post-title"><?php the_title(); ?></h2>
                <p class="blog-post-meta"><?php the_date(); ?> by <a href="#"><?php the_author(); ?></a></p>
                <?php the_content(); ?>
            </div>
        </div>
    </div>
    <?php
        endwhile; endif;
    ?>


<?php get_footer(); ?>

7、菜单的使用

注册菜单

将以下代码放入function.php文件内

function register_my_menus()
{
    register_nav_menus(
        array(
            'footer-menu' => __('Footer Menu')
        )
    );
}
add_action('init', 'register_my_menus');

调用菜单

方法一, 使用menu名称:

Footer Menu 是菜单名称

wp_nav_menu(array('menu' => 'Footer Menu'));

方法二,使用 theme_location:

footer-menu 是菜单名称

wp_nav_menu( array( 'theme_location' => 'footer-menu' ) );

需要使用菜单时在需要的地方调用即可

菜单名称只能用英文
wp_nav_menu 方法详解:https://developer.wordpress.org/reference/functions/wp_nav_menu/

8、widgets.php 注册侧边栏

用法

将以下代码放入function.php文件内
注册好的侧边栏需先在后台选择外观→小工具内进行设置你需要显示的内容

$args = array(
    'name'          => '文章侧边栏',
    'id'            => 'sidebar-post',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3 class="widgettitle">',
    'after_title'   => '</h3>'
);
register_sidebar( $args );

args – 字符串/数组(可选)创建基于“name”和“id”的侧边栏。 默认值: None
name – 侧边栏的名字(默认是 ‘Sidebar’ 加 数字 ID)
id – 侧边栏 ID,必须全部小写,不带空格(默认是一个自动递增的数字 ID)
description – 用来说明侧边栏是什么,在哪里显示的文字。会在小工具管理界面显示。(默认为 空)
class – 分配到小工具 HTML输出 中的CSS选择器名字(默认为空)
before_widget – 在每个小工具前面输出的 HTML代码(默认: <li id="%1$s"class="widget %2$s">)注:使用sprintf的变量替换
after_widget – 在每个小工具后面输出的 HTML代码(默认: </li>
before_title – 在标题前输出的 HTML代码(默认: <h2 class="widgettitle">
after_title – 在标题后输出的 HTML代码 (默认: < /h2>

9、sidebar.php 侧边栏区域

大多数网站,尤其是博客,都会有一个侧面区域,用于包含档案,标签,类别,广告和诸如此类的内容。
可以用以下代码调用侧边栏模板:

<?php dynamic_sidebar('sidebar-post')?>

需要使用侧边栏时在需要的地方调用即可
<?php get_sidebar( $name ); ?> $name (string)(可选) 调用 sidebar-name.php 默认: None
引入当前主题的模板文件 sidebar.php 。如果使用特定的名字 ($name) ,那么就会引用包含这个特定名字的模板文件 sidebar-{name}.php 。
如果主题没有 sidebar.php 文件,就会引入默认的 wp-includes/theme-compat/sidebar.php

dynamic_sidebar()这个函数是用来检测,当前的小工具区有没有被设定。返回“真、假”的布尔值。
函数用来支持自定义sidebar侧边栏,可以自定义Widget小插件,比如为侧边栏添加最近文章,文章归档,最新评论,标签云等。

10、总结:

style.css – 此文件添加一些css注释的位置,以便WordPress了解有关自定义主题的一些信息,它还可以应用于自定义主题的css样式
index.php – 此文件控制主题的html的常规输出,用于主页上输出数据的主文件
header.php – 指定一个区域< head>区域中有关网站的重要信息,以及包括打开< html>、< body>和< div class=”container”>标记
footer.php – 除了调用wp_footer()函数的位置之外,页脚将关闭标题区域中指定的任何开始标记,用来结束代码结构。
functions.php – 调用PHP和内置WordPress函数,并定义自己的函数以更改WordPress的默认行为
single.php – 个人帖子模板
widgets.php – 注册侧边栏
page.php – 页面模板
sidebar.php – 侧边栏区域

参考文档

https://www.kancloud.cn/jabber/wordpress/296765
https://wphierarchy.com/

 6,168 total views,  6 views today

Revisions

No comments yet.

发表评论