30分钟学会WordPress主题开发入门 简单梳理WordPress主题制作

  • 麦子的头像-WordPress建站笔记
  • 麦子
    2022年4月19日 09:12:38发布

有很多朋友可能希望学习WordPress主题开发和仿站主题,实际上如果我们即便不会编程,就会简单的HTML和简单能看懂PHP代码应该是也可以的,基本上我们能仿站WordPress主题和基本的主题开发是没有问题的。在这篇文章中,麦子就梳理WordPress一款主题入门学习开发的记录,直接筛选出重点逻辑和需要的标签。

30分钟学会WordPress主题开发入门 简单梳理WordPress主题制作

我们只需要按照这个过程就可以开发出一款没有后端的WordPress博客主题。

第一、创建主题

我们需要创建一个主题文件夹,举个例子 cnwper_blog ,将文件夹放到 wp-content/themes 目录中。我们需要将准备好的HTML静态页面,放到这个目录中。然后在根目录放一个 style.css 样式文件。

在 style.css 文件顶部加上标识识别主题的代码。

/*
Theme Name: Bloger
Theme URI: https://www.cnwper.com/
Author: 麦子
Author URI: https://www.cnwper.com/
Description: WordPress Blog
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog
Text Domain: cnwper

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

这个我们就可以在WordPress主题识别到当前这个主题。具体标签内容我们自己修改,包括名称、官方网站等信息。

然后我们就可以修改HTML页面,可以将页面更换成 index.php 在样式的位置调整WP的路径。

<?php echo get_stylesheet_directory_uri() ?>/style.css

然后我们在 title 中间调出标题的部分更换成:

<?php wp_title( '--', true, 'right' ); ?><?php bloginfo( 'name' ); ?>

同时,我们需要在 </head>前面添加:

<?php wp_head();?>

且在</body>前面添加:

<?php wp_footer(); ?>

第二、拆分页面

这里,我们需要进行页面拆分,拆分出来 index.php、header.php、footer.php、sidebar.php

这里,我们直接拆分代码将代码丢到对应的PHP页面,然后在index.php拿掉的代码位置用代码调用补充。分别补充:

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

这样,我们就可以将准备好的INDEX.HTML,拆分成四个页面。头部、中间、底部、侧边。是不是就是一个简单的主题模板?

然后我们可以将中间的核心部分进行代码循环,就是博客列表。

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        循环部分
    <?php endwhile; ?>
<?php endif; ?>

循环部分一般包括:标题、摘要、时间日期、作者等信息。

标题 替换为 <?php the_title();?>;

摘要 替换为 <?php the_excerpt();?>;

作者 替换为 <?php the_author();?>;

作者标签的 href 的值替换为 <?php the_author_link();?>;

日期 替换为 <?php the_date();?>。

具体的调用信息可以参考搜索其他的调用参数。

上一页下一页分页可以用简单的调用:

<?php next_posts_link( 'Older posts' ); ?>
<?php previous_posts_link( 'Newer posts' ); ?>

如果有需要分页的可以再找合适的调用函数。需要定义的。或者我们还可以用无限翻页:记录设置WordPress文章下拉自动无限翻页效果(更换传统的翻页方式)

完毕之后,我们可以再进行内容页面single.php,可以复制index.php,然后对摘要的部分进行修改调用:

the_content()

摘要替换成这个即可。同时 page.php 页面也是和index.php和single.php差不多的。

第三、调用代码

基本的框架我们搞定后,就开始做一些调用,比如网站标题、描述、侧边的时间归档、最新文章等都可以找到对应调用的。

比如日期归档:

<?php wp_get_archives( 'type=monthly' ); ?>

评论信息:

<?php
if ( comments_open() || get_comments_number() ) :
    comments_template();
endif;
?>

在single.php中合适的位置添加评论调用。且需要再创建一个处理评论的页面:comments.php

<?php
// part 1 
if ( post_password_required() ) {
    return;
} ?>
    <div id="comments" class="comments-area">
        <?php
        // part 2 
        if ( have_comments() ) : ?>
            <h3 class="comments-title">
                <?php
                // part 3 
                printf( _n( '“%2$s” 有一条评论', '“%2$s” 有 %1$s 条评论', get_comments_number(), 'comments title'),
                     get_comments_number() , get_the_title() );
                ?>
            </h3>
            <ul class="comment-list">
                <?php 
                // part 4
                wp_list_comments( array(
                    'short_ping'  => true,
                    'avatar_size' => 50,
                ) );
                ?>
            </ul>
        <?php endif; ?>
        <?php
        // part 5
        if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
            <p class="no-comments">
                <?php _e( '评论已关闭.' ); ?>
            </p>
        <?php endif; ?>
        <?php comment_form(); ?>
    </div>

对于样式部分我们自己单独调整,我们这里只是整理主题开发的基本逻辑。

第四、主题功能

我们还可以单独给主题设置功能,我们主题目录创建一个 functions.php 然后可以加入一些定义的功能。

这样,这个WordPress主题开发逻辑已经整理出来,我们只需要对应的修改调用标签和样式就可以做一个简单的博客主题。如果我们要复杂的主题也是在基础上进行完善的。比如有优先级的页面模板、后端管理框架。

© 版权声明
THE END
喜欢就支持一下吧
点赞5
分享