WordPress主题开发教程

WordPress主题开发教程

创建一个数据库,复制wordpress中wp-config-sample.php文件,更改名字为wp-config.php,修改文件中(DB_NAME,DB_USER,DB_PASSWORD)对应刚刚创建的数据库信息。

/** The name of the database for WordPress */
define('DB_NAME', 'wp2018');
/** MySQL database username */
define('DB_USER', 'username_here');
/** MySQL database password */
define('DB_PASSWORD', 'password_here');

打开Laragon Full,选择文件根目录,运行,在浏览器中输入:运行目录下的文件名.test就可以打开主题页面,从WordPress仪表盘激活刚刚建立的主题,就可以看到新建的主题内容。

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

在wp-content文件夹中找到themes文件夹,themes文件夹是一个主题文件夹,一般在themes中有默认的三个文件夹,分别是:twentyfifteen、twentysixteen、twentyseventeen,它们都是WordPress随附的三个主题,接下来在themes文件目录下创建一个新的文件夹,用来放置我们自己的主题。

2、在自定义主题文件夹中创建style.css和index.php

style.css:指定有关正在构建的主题特定的信息

style.css文件控制着网站页面的呈现(设计和布局)

/*
Theme Name: customtheme     主题的名称
Author: Vegibit     作者
Author URI: https://vegibit.com     作者的URL
Version: 1.0        主题的版本号
 */

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

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;

get_footer();

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

3、functions.php !重要文件

关键点:
* 不需要唯一的标题文本
* 存储在包含主题文件的文件夹中
* 仅在当前激活的主题目录中执行
* 仅适用于当前主题
* 可以调用PHP函数,WordPress函数或自定义函数

将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:类似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><?php bloginfo( 'name' ); ?></h1>
    <h4><?php bloginfo( 'description' ); ?></h4>
</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、sidebar.php 侧边栏区域

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

<?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小插件,比如为侧边栏添加最近文章,文章归档,最新评论,标签云,搜索框,类别,链接表,网站统计,活跃读者,社交按钮,邮箱订阅,广告模块等。

6、page.php 页面模板

<?php get_header(); ?>

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

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

    get_template_part( 'content', get_post_format() );

    endwhile; endif;
            ?>

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

7、single.php 个人帖子模板

single.php这是一个单独的帖子页面。这将是page.php的完全重复,把’content’改为’content-single’。

<?php get_header(); ?>

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

            <?php
    if ( have_posts() ) : while ( have_posts() ) : the_post();
    get_template_part( 'content-single', get_post_format() );
    endwhile; endif;
            ?>


<?php get_footer(); ?>

创建content-single.php,它是content.php的副本。

<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>

现在可以看到index.php正在引入content.php,而single.php正在引入content-single.php。

回到原来的content.php,获取每篇文章的标题。

<h2 class="blog-post-title"><?php the_title(); ?></h2>

使用the_permalink(),我们将链接到单个页面。

<h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

最后,可以改变the_content()到the_excerpt()的content.php。摘录仅显示帖子的前55个单词,而不是整个内容。

<?php the_excerpt(); ?>

8、post-types.php 自定义文章类型与文章分类

new Custom_Post_Type_Post($post_type = 'news', $plural = '新闻', $single = '新闻', $description = '', $has_archive = true);
$post_type - 自定义文章类型
$single,$plural - 单复数
$description - 文章类型的简要描述
$has_archive- 启用帖子类型归档。默认情况下,将使用$ post_type作为存档段。默认值:false
new Custom_Taxonomy($taxonomy = 'product-category', $plural = '产品分类', $single = '产品分类', $post_types = array('products'));
$taxonomy 字符串型,必需,分类法的名称,用英文
$post_types 文章类型

9、widgets.php 注册侧边栏

register_sidebar(注册侧边栏)

介绍

注册一个单独的侧边栏区域和返回ID,供 “widgets_init” 钩子调用。

用法

<?php register_sidebar( $args ); ?>

默认用法

<?php $args = array(
    'name'          => __( 'Sidebar name', 'theme_text_domain' ),
    'id'            => 'unique-sidebar-id',
    'description'   => '',
    'class'         => '',
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>' ); ?>

 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>\n")
 before_title – 在标题前输出的 HTML代码(默认: <h2 class="widgettitle">)
 after_title – 在标题后输出的 HTML代码 (默认:"</h2>\n")

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 侧边栏区域

779 total views, 8 views today

Revisions

No comments yet.

发表评论