wordpress-自定义模板开发-创建文章页面

是十六啊
954 阅读3分钟

废话就不多说了，直接上干货。一下就总结一些很常用的基础API，基本满足普通页面的研发。

1、获取网站配置信息 - bloginfo($name)

image.png

<div>
    <?php echo beloginfo('name'); ?>
</div>

beloginfo $name 取值 一下列出一些常用的属性

参数说明其他
name网站标题
description站点副标题
wpurlwordpress地址（当前）
url站点地址
charsetwodpress所使用的编码UTF-8
versionwordpress版本
html_typetext/html 文本标签<meta http-equiv="type" content="text/html" charset="UTF-8" />
language语言ZH-CN
stylesheet_urlstyle.css的文件地址
templte_url
template_directory		主题所在的地址

显示页面的标题 wp_title($sep, $display, $seplocation)

参数说明其他
$sep='&raquo'分隔符
$display = true 是否返回值
$seplocation = left 分隔符的位置，left,right		显示页面的标题信息
在single.php中就是文章的标题
在index.php没有效果
在archive.php中显示的就是分类的名称
在日期页面中，显示的就是该日期		通常在header.php中使用，title标签中

获取发表的文章信息

在管理后端发布文章之后，一是：文章列表页， 二是文章详情

image.png

文章常用API

API说明参数其他
the_title(before,after, echo)文章标题before=标题之前插入的内容
after=在标题后面插入内容
echo=true是否展示标题
the_content(more_link_text, strip_teaser:false)文章内容more_link_text:'(更多...)'点击查看更多的描文本文章中可设置“查看更多的描点”在single.php(文章详情php无效)
the_excerpt()文章摘要信息，如果没有设置摘要信息,则从正文中中截取55个字符
the_tags(before,sep,after)文章设置的标签目录before=标签前插入内容
sep=多个标签时的分隔符
adfter=标签后面插入内容
the_author()作者
the_time(d)文章发布时间d=时间格式'Y m d h:i:s'
the_permalink()文章的跳转链接，多用于列表

文章列表：page-news

列表页，需要多个分类tab切换

在代码中，你获取的分类可能是要过滤某些特殊的分类。这时候你需要id标识。同个以下方法去获得
1、你可以通过后台。在链接上获取你要过去的分类id。这个方法比较快速，但是做调整例如删除之后新增就id就一样了

image.png 2、通过你设置的分类标识去查 image.png

以下就以分类别名去查(只查一级分类)：新闻中心

// 公共头部
<?php get_header(); ?>

// 文章有多个分类，有个分类列表tab
<?php
/*过滤帮助中心分类*/
    $cat = get_category_by_slug('help');
    // 过滤列表
    $exclude_cat = array($cat->cat_ID);
    $help_cat = get_categories(array(
      'child_of' => $cat->cat_ID,
      'type' => 'post'
    ));
    foreach ($help_cat as $child) {
      array_push($exclude_cat, $child->cat_ID);
    }
    // 过滤之后的分类列表
    $categories = get_categories(array(
      'type' => 'post',
      'exclude' => array_merge(array(1), $exclude_cat),
      'parent' => 0
    ));
    foreach ($categories as $category) {
      echo '<a href="' . get_category_link($category->term_id) . '" title="' . sprintf(__("View all posts in %s"), $category->name) . '" ' . '>' . $category->name . '</a>';
    }

// 公共尾部
<?php get_footer(); ?>

循环文章列表

1、列表是需要分页的，在管理后台中“插件中”，下载一个分页插件wp_pagenavi

image.png

// 分页查询
 <?php
  $the_query = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 10,
    'paged' => get_query_var('paged'),
    'category__not_in' => $exclude_cat // 过滤掉一些特殊的分类
  ))
  ?>
 
// 判断是否有存在文章,然后使用while循环文章列表
<?php if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
    // 因为在移动端采用的样式不一致，这里封装的一个函数判断是否是移动端
    <?php if (is_mobile()) : ?>
    <div target="_blank" class="article-item-m block">
    <?php else : ?>
    <div target="_blank" class="article-item block">
    <?php endif; ?>
        // 判断是否有封面图
        <?php $imgUrl = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');  ?>
        <?php if ($imgUrl && $imgUrl[0]) : ?>
        <div class="img" style="background-image: url(<?php echo $imgUrl[0]; ?>);" alt="<?php wp_title(); ?>"></div>
        <?php endif; ?>
        // 文章循环：文章点击可跳转文章详情
        <a href="<?php echo get_the_permalink(); ?>">
            <h3>
              <?php the_title(); ?>
            </h3>
            <?php if (!is_mobile()) : ?>
              <div class="desc">
                <?php the_excerpt(); ?>
                <div class="time"><?php the_time('Y-m-d'); ?></div>
              </div>
            <?php else : ?>
              <div class="time"><?php the_time('Y-m-d'); ?></div>
            <?php endif; ?>
        </a>
    </div>
// 结束循环
<?php endwhile; ?>
// 分页器
<div class="paging">
    <?php
        wp_pagenavi(array(
            'query' => $the_query
        ));?>
</div>
// 如果没有文章列表；显示缺省图
<?php else : ?>
<div class="nodata">
    <img class="nodata" src="<?php echo get_template_directory_uri(); ?>/assets/images/nodata.png" />
    <p>暂时没有可查阅的新闻</p>
</div>
// 对应开头的 if 
<?php endif; ?>

/*
由上就可以看到，每一个API都是有对应的结束API,和我们的HTML标签差不读。
<?php if (判断条件) : 为真时执行的执行动动;?>
<? endif ?>
*/
function.php 公共工具文件

在wordpress根目录下中有一个function.php：主要是用来放置一些公共工具类函数，例如上面的判断是否为移动端。还有就是开启管理端中的插件

/* 判断是否是移动端 */
function is_mobile()
{
  $user_agent = $_SERVER['HTTP_USER_AGENT'];
  $mobile_browser = array(
    "mqqbrowser", //手机QQ浏览器
    "opera mobi", //手机opera
    "juc", "iuc", //uc浏览器
    "fennec", "ios", "applewebKit/420", "applewebkit/525", "applewebkit/532", "ipad", "iphone", "ipaq", "ipod",
    "iemobile", "windows ce", //windows phone
    "240x320", "480x640", "acer", "android", "anywhereyougo.com", "asus", "audio", "blackberry", "blazer", "coolpad", "dopod", "etouch", "hitachi", "htc", "huawei", "jbrowser", "lenovo", "lg", "lg-", "lge-", "lge", "mobi", "moto", "nokia", "phone", "samsung", "sony", "symbian", "tablet", "tianyu", "wap", "xda", "xde", "zte"
  );
  $is_mobile = false;
  foreach ($mobile_browser as $device) {
    if (stristr($user_agent, $device)) {
      $is_mobile = true;
      break;
    }
  }

  return $is_mobile;
}

在页面中，你的导航栏可能是要可配置的，这可就需要一个地方去存你的导航栏信息。这个菜单类型就需要在function.php中去开启

image.png

// function.php
/* 
?开启导航菜单 
!register_nav_menu
*/
register_nav_menu('nav_top', '顶部导航');
register_nav_menu('nav_left', '侧边导航');
register_nav_menu('nav_bottom', '底部链接菜单配置');

我们在页面中就可以根据导航栏标识来获取你配置的导航栏
例如公共header.php中导航栏

 <nav id="nav_menu" class="nav">
    <div class="main-width">
      <a href="<?php bloginfo('url'); ?>" id="logo">
        <img src="<?php echo get_template_directory_uri() ?>/assets/images/logo.png">
      </a>
      <?php if (is_mobile()) : ?>
        <div>
          <img class="icon menu_close" src="<?php echo get_template_directory_uri(); ?>/assets/images/menu.png">
          <img style="display: none;" class="icon menu_close" src="<?php echo get_template_directory_uri(); ?>/assets/images/close.png">
        </div>
      <?php endif; ?>
      <?php
      // 移动端，pc不一致样式
     
      $menu_class = 'pc_menu';
      if (is_mobile()) $menu_class = 'menu';
      wp_nav_menu(array(
        'theme_location' => 'nav_top',
        'container' => false,
        'menu_class' => $menu_class,
        'menu_id' => 'menu'
      )); ?>
    </div>
  </nav>

文章详情 - template-parts/single-news.php

文章详情可作为一个模板使用，发表文章的时候选择新闻模板，展示不同样式

image.png

<?php 
// wordpress中通过以下注释即可把这个创建模板
/*
 * Template Name:新闻详情页
 * Template Post Type: post */ ?>
 <?php get_header(); ?>

<img class="head-img" src="<?php echo get_template_directory_uri(); ?>/assets/images/news.png" alt="<?php wp_title(); ?>">
<?php if (have_posts()) : ?>
  <main id="single-post" class="main-width">
    <h1 class="title">
      <?php the_title(); ?>
      <div><?php the_time('Y年m月d日'); ?></div>
    </h1>
    <article><?php the_content(); ?></article>
    <div class="paging">
      <?php previous_post_link('%link', '上一篇：%title', true); ?>
      <?php next_post_link('%link', '下一篇：%title', true); ?>
    </div>
  </main>
<?php endif; ?>
<?php get_footer(); ?>
avatar
文章
阅读
粉丝