自定义模板开发

当在线模板满足不了我们的开发需求时，我们可以选择自定义模板开发

自定义模板

1、首先找一个好看或者使用自己的HTML模板，方便接下来的操作

2、在wordpress项目找到此目录,例如路径如下：

wordpress/wp-content/themes

3、在themes目录下新建一个文件夹来存放模板，模板文件夹名称自定义，这里起名为test-blog

4、在test-blog里新建一个style.css的文件，把下面的内容复制到style.css里，关于模板一些基本信息

/**
 * Theme Name: 主题名称
 * Theme URI: 主题链接
 * Author: 主题作者
 * Author URI: 主题作者主页地址
 * Description: 主题详情
 * Version: 版本号
 * Tags: 标签
 */

5、把HTML模板的index.html放在test-blog里并且重命名为index.php

6、去后台->外观->主题,就看到我们添加的主题模板了

7、不过没有缩略图，但是我们可以定义缩略图，找一张关于该模板的图片或者截图，放到test-blog里并且重命名screenshot.png(jpg格式也可以)

8、现在去前台看到首页样式都是乱的

9、把模板的css，js，images，fonts等放到test-blog里

10、下面我们就可以调用wordpress封装的函数输出数据

查询文章

<?php
    // 全局函数 检查是否还有post，如果有就返回true，否则返回false
    if(have_posts())
    {
        // 循环
       while(have_posts())
       {
            // 某条文章数据
            the_post();

            主体代码...
       }
    }

    // 以下的函数用于输出文章
    the_title();// 文章标题
    the_excerpt();// 文章摘要
    the_ID();// 文章ID
    the_content();// 文章内容 只在循环生效
    the_permalink();// 文章链接
    the_category();// 文章分类
    the_comments_number();// 获取评论数量
    the_author();// 文章作者 只在循环生效
    the_time();// 文章时间 参数 定义输出的日期格式
?>

文章详情

    // 文章标题
    <h1><?php the_title(); ?></h1>

    // 文章内容
    <article>
        <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
        <?php the_content(); ?>
        <?php endwhile; ?>
        <?php endif; ?>
    </article>

文章分页

// 第一种
<?php posts_nav_link(); ?> 

// 第二种
<?php the_posts_pagination( array(
    'base'=>'',  //你可以自己制定导航的URL，一般不用写此属性
    'prev_text' => '上一页', //上一页标题及链接，默认Previous
    'next_text' => '下一页', //下一页标题及链接，默认Next
    'before_page_number' => '', //页码前面的数字
    'after_page_number' => '',  //页码后面的数字
    'total'=>5, //你可以控制显示的页数，默认最大页数
    'format' =>'?paged=%#%', //导航链接格式化，体现在鼠标悬停在翻页链接时。
    'current' => max( 1, get_query_var('paged') ),  //当前页码
    'add_fragment'=>'' //体现在鼠标悬停在翻页链接时，分页链接追加字符串
));?>

开启文章缩略图功能

functions.php

// 给文章和页面开启缩略图功能
add_theme_support( 'post-thumbnails' );

// 给文章启用文章缩略图功能
add_theme_support( 'post-thumbnails', array( 'post' ) );

// 给页面启用文章缩略图功能
add_theme_support( 'post-thumbnails', array( 'page' ) );

// 设置文章缩略图大小 50 像素宽和 50 像素高，裁剪模式
set_post_thumbnail_size( 50, 50, true );

逻辑代码

// 判断是否有缩略图
if ( has_post_thumbnail() ) {
    // 当前文章有缩略图就输出缩略图
    the_post_thumbnail();
} else {
    //当前文章没有设置缩略图
}

导航菜单

functions.php

// 注册导航菜单函数
function test_register_nav_menus(){
    register_nav_menus( array(
        'header_menu' => __( '顶部菜单', 'top' ), 
        'footer_menu' =>  __( '页脚菜单', 'bottom' )
     ));
}

// 添加动作
add_action( 'init', 'test_register_nav_menus' );

在前台输出导航

   <?php
        // 导航配置
        $defaults = array(
              'theme_location' => '', //调用菜单的名称，名称是你自己注册菜单的时候自定义的
              'menu'      => '',  //使用导航菜单的名称调用菜单，可以是 ID、别名和名字（按顺序匹配）
              'container'    => 'div', //最外层容器的标签
              'container_class' => '', //外层容器的class
              'container_id'  => '',  //外层容器的 ID
              'menu_class'   => 'menu',  //ul 父节点的 class 属性
              'menu_id'     => '', //ul 父节点的 id 属性
              'echo'      => true, //布尔值，是否输出菜单，为false是可以用于赋值
              'fallback_cb'   => 'wp_page_menu',  //当前设置的菜单不存在时，显示此处设置的菜单
              'before'     => '',  //显示在每个菜单链接前的文本
              'after'      => '', //显示在每个菜单链接后的文本
              'link_before'   => '',  //显示在每个菜单链接文本前的文本
              'link_after'   => '',  //显示在每个菜单链接文本后的文本
              'items_wrap'   => '<ul class="%1$s" id="%2$s">%3$s</ul>',  //菜单的输出结构，
              'depth'      => 0,  //显示菜单深度，0为显示所有
              'walker'     => '' //菜单的结构对象  通过改参数可以制作任意结构的导航菜单
        );
    ?>

    // 输出导航菜单
   <?php wp_nav_menu( $defaults); ?>