WordPress主题开发教程

WordPress主题开发教程

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

        <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();       页脚

?>

3、创建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() ?>      确定header.php文件的<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>
footer.php:除了要调用wp_footer()函数外,还需要加上</ body>、</ html>标签结尾
<footer class="site-footer">
    <p><?php bloginfo( 'name' ) ?></p>
</footer>

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

4、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' );

激活或包含了自定义主题的样式表

5、总结:

  • 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的默认行为

368 total views, 4 views today

Revisions

No comments yet.

发表评论