WordPress 主题特殊文件的作用。

`index.php`

主题的默认界面，如果 WordPress 未找到需要找的文件，就会返回该文件

在该文件中可以使用以下方法在首页循环显示文章

<?php
	while(have_posts()) {
    the_post();
?>
  	<!-- 显示当前文章标题 -->
    <h2>
  		<a href="<?php the_permalink(); ?>">
  			<?php the_title(); ?>
  		</a>
  	</h2>

    <!-- 显示当前文章内容 -->
  	<?php the_content(); ?>
  	<hr>
<?php
  }
?>

`style.css`

WordPress 会自动加载其中的注释，以得到主题相关的信息

/*
  Theme Name: 主题名
  Author: 作者名
  Version: 1.0.0
*/

`screenshot.[png|jpg|jpeg]`

WordPress 会加载该文件作为主题预览图，若存在同名不同格式文件优先加载 png 格式

推荐宽高尺寸为 1200x900px

`single.php`

单篇文章的默认载体（在首页点击文章详情跳转到文章页面时），使用方法如下：

<?php
  // 获取头部区域
  get_header();
	// 将当前文章设置为全局变量
  the_post();
?>
  <!-- 文章标题 -->
  <h1><?php the_title(); ?></h1>
  <?php
    // 输出文章内容
    the_content();
		// 获取脚部区域
    get_footer();
  ?>

`single-*.php`

自定义类型的单篇帖子页面

如：注册了自定义类型 event ，则可以通过 single-event.php 文件来接管对 /event/* 的访问请求

`page.php`

WordPress 页面的载体，使用方法：

<?php
  // 获取头部区域
  get_header();
	// 将当前文章设置为全局变量
  the_post();
?>
  <!-- 文章标题 -->
  <h1><?php the_title(); ?></h1>
  <?php
    // 输出文章内容
    the_content();
		// 获取脚部区域
    get_footer();
  ?>

`page-*.php`

在 page 后面接上页面的固定链接，即可成为该页面的模板文件

例如：新建一篇页面，设置固定链接为 past-events，则主题文件夹下的 page-past-events.php 文件是模板文件

`archive.php`

帖子归档页面

`archive-*.php`

自定义帖子的归档页面

如：注册了自定义类型 event ，则可以通过 archive-event.php 文件来接管对 /event/ 的访问请求

`header.php`

当前网站的头部区域，get_header() 函数会加载该文件

<!DOCTYPE html>
<!-- 通过wordpress设置网站语言 -->
<html <?php language_attributes(); ?>>
  <head>
  	<!-- 通过wordpress设置网页字符集 -->
    <meta name="charset" content="<?php bloginfo('charset'); ?>">
  	<!-- 设置网页显示尺寸，响应式布局建议加上 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
  	<!--
      通过wordpress获取head区域内容，通过该函数也可以将其他插件注册的文件加载进来，
      不建议手动写link加载css以及js文件，而是通过wordpress钩子在functions.php中注册
  	-->
    <?php wp_head(); ?>
  </head>
  <!-- wordpress会给网站设置一些类名 -->
  <body <?php body_class(); ?>>
    <header>
      <!-- 网站头部区域内容 -->
    </header>

`footer.php`

当前网站的脚部区域，get_footer() 函数会加载该文件

		<!--
      通过wordpress获取footer区域内容，如functions.php或其他插件注册的脚部文件，
      不建议手动写script加载js文件，而是通过wordpress钩子在functions.php中注册
  	-->
		<?php wp_footer(); ?>
  </body>
</html>

`functions.php`

在此调用wordpress钩子函数注册一些事件，比如加载css、js文件，注册菜单位置等

在主题的 functions.php 文件中定义的函数，其他主题文件和插件文件也是可以使用的。因为 functions.php 文件中定义的函数在WordPress加载时会被载入到全局作用域中，因此其他文件可以调用这些函数。

<?php
  // 加载样式表
  function university_files() {
    // 第一个参数为id，第二个参数为文件路径
    wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
    wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    wp_enqueue_style('university_main_style', get_theme_file_uri('/build/style-index.css'));
    wp_enqueue_style('university_extra_style', get_theme_file_uri('/build/index.css'));
    
    // 第三个参数为依赖项，wordpress会先加载依赖项
    // 第四个参数为当前注入的脚本的版本
    // 第五个参数声明是否需要在head标签里加载，如果为false则在body标签里加载
    wp_enqueue_script('university_main_js', get_theme_file_uri('/build/index.js'), array('jquery'), '1.0.0', true);
  }

  // 添加加载样式表的钩子
  add_action('wp_enqueue_scripts', 'university_files');


  // 添加自定义的meta信息
  function university_features() {
    // 注册wordpress管理界面主题菜单设置
    register_nav_menu('headerMenuLocation', '头部菜单位置');
    register_nav_menu('footerLocationOne', '脚部菜单位置1');
    register_nav_menu('footerLocationTwo', '脚部菜单位置2');

    // 标题通过wordpress生成
    add_theme_support('title-tag');
    // 启用文章特色图
    add_theme_support('post-thumbnails');
    // 图像尺寸设置：尺寸名（无特殊要求）, 图像宽, 图像高, 是否裁切（默认根据中心裁切）
    // 第四个参数可以传入数组，来控制裁切中心：array('left', 'top')
    // 如果想要手动裁切图片，可以使用插件（Manual Image Crop）
    add_image_size('教授横向缩略图', 400, 260, true);
    add_image_size('教授纵向缩略图', 480, 650, true);
  }

  add_action('after_setup_theme', 'university_features');
?>

`front-page.php`

网站首页，如果想要设置网站首页不是博客，而是一个定制首页，可以在该文件中设置

新建两个空白页面：
1. 博客，链接地址为 /blog/
2. 首页，链接地址为 /home/
在WordPress管理界面 设置 => 阅读，设置主页和文章页显示静态页面
1. 主页：首页
2. 文章：博客
新建 front-page.php文件

随后，WordPress将做出变化：

由 index.php 文件接管博客的地址/blog/
由 front-page.php 文件接管首页的地址 /
访问 /home/ 会自动重定向到 /

显示页面导航菜单（父子页面）

一般在 page.php 文件中使用，用于展示当前页面的父子页面关系导航菜单，类似于章节导航目录

<?php
  // 当前文章id
  $self_id = get_the_ID();
  // 当前文章的父页面id，如果没有父页面，就会得到0
	$parent_post_id = wp_get_post_parent_id($self_id);
  // 如果当前页面有父页面或者子页面，则展示页面导航菜单
  if ($parent_post_id || get_pages(['child_of' => $self_id])) {
?>
  <!-- 子页面菜单区域，类似于侧边导航菜单，可以将当前页面的父子页面关系展示出来 -->
  <div class="page-links">
  	<!-- 导航菜单父页面标题 -->
    <h2 class="page-links__title">
      <a href="<?php echo get_permalink($parent_post_id); ?>">
        <?php echo get_the_title($parent_post_id); ?>
      </a>
    </h2>
  	<!-- 导航菜单子页面列表 -->
    <ul class="min-list">
      <?php
        // 当前页面有父级页面时，展示父级页面的子页面
        // 否则展示当前页面的子页面
        if ($parent_post_id) {
          $thisChildOf = $parent_post_id;
        } else {
          $thisChildOf = $self_id;
        }

        wp_list_pages(
          array(
            'title_li' => null, // 不显示pages字段
            'child_of' => $thisChildOf,
            'sort_column' => 'menu_order', // 使用页面属性排序
          )
        );
      ?>
    </ul>
  </div>
<?php } ?>

动态菜单

使用 add_action('after_setup_theme') 钩子在主题初始化之后执行自定义函数

并在自定义函数中使用 register_nav_menu 注册菜单位置名称

function university_features() {
  // 注册wordpress管理界面主题菜单设置
  register_nav_menu('headerMenuLocation', '头部菜单位置');
  register_nav_menu('footerLocationOne', '脚部菜单位置1');
  register_nav_menu('footerLocationTwo', '脚部菜单位置2');
}

add_action('after_setup_theme', 'university_features');

在需要该菜单的地方使用 wp_nav_menu 加载菜单，比如在 header.php 中：

<nav class="main-navigation">
  <?php
    wp_nav_menu(array(
      'theme_location' => 'headerMenuLocation'
    ));
		/* 
      函数生成动态菜单，该菜单来自wordpress管理界面设置的菜单
      headerMenuLocation 是在functions.php中注册的菜单名称
      使用动态菜单的好处是在访问菜单项指向的页面时wordpress会给该项
      设置 current-menu-itme class类名，可以给该类名设置单独的样式以突出显示
    */
	?>
</nav>

在 WordPress 后台管理界面设置菜单：外观 => 菜单

自定义帖子类型

一般使用必须插件来注册自定义帖子类型，启用后就不必担心后台关闭该插件而无法访问已创建的数据

注意：WordPress不会自动更新新的页面类型的永久链接，需要手动在设置里更新

示例：

/wp-content/mu-plugins/university-post-types.php

<?php
  // 自定义post类型
  function university_post_types() {
    // 添加文章类型
    register_post_type('event', array(
      'rewrite' => array(
        'slug' => 'events', // 文章类型显示的固定链接
      ),
      'has_archive' => true, // 是否有文章归档页面
      'public' => true, // 对外可见
      'labels' => array(
        'name' => '活动', // 文章类型的名称
        'add_new_item' => '添加活动', // 添加新文章时编辑页面的标题
        'add_new' => '添加活动', // 在WordPress后台菜单中显示的链接文本
        'all_items' => '所有活动', // 显示所有活动的按钮文本
        'edit_item' => '编辑活动', // 编辑活动的按钮文本
        'new_item' => '新建活动', // 新建活动的按钮文本
        'view_item' => '查看活动', // 查看活动的按钮文本
        'search_items' => '搜索活动', // 搜索活动的按钮文本
        'not_found' => '未找到活动', // 没有找到活动时的提示信息
        'not_found_in_trash' => '未找到活动', // 回收站中没有找到活动时的提示信息
        'single_name' => '活动' // 单个活动的提示信息
      ),
      'menu_icon' => 'dashicons-calendar' // 值：WordPress Dashicons（https://developer.wordpress.org/resource/dashicons）
    ));
  }
  // 添加自定义的post类型
  add_action('init', 'university_post_types');
?>

自定义字段

因为使用自定义类型中的 supports 字段添加 custom-fields 对用户来说不友好，用户需要自己设置字段名称和类型。而我们不需要重复造轮子，所以一般使用行业标准（自定义字段）插件，这两个插件之一是必备插件，使用插件需要先清除自定义类型配置 supports=>custom-fields

有两个可以选择：

Advanced Custom Fields(ACF)
CMB2(Custom Metaboxes 2)

使用 Advanced Custom Fields(ACF) 插件后，可以在文章中使用 the_field('event_date') 输出自定义日期字段的值，或使用 get_field('event_date') 获取自定义日期字段的值

其他

WordPress 函数

所有函数查看：https://developer.wordpress.org/reference/functions/

`have_posts()`

返回是否有文章需要渲染，一般用在循环文章：

<?php
  while(have_posts()) {
    the_post(); // 准备文章数据
?>
  	<!-- 输出文章标题 -->
  	<h1><?php the_title(); ?></h1>
  	<!-- 输出文章内容 -->
  	<p><?php the_content(); ?></p>
<?php
	}
?>

`has_excerpt()`

返回文章是否有摘要

`the_title()`

the_title(string $before='', string $after='', bool $display=true): void|string

输出帖子的标题

$before 在标题前拼接内容

$after 在标题后拼接内容

$display 是否输出到页面上

`the_content()`

输出文章内容

`the_excerpt()`

输出文章摘要

`the_permalink()`

输出帖子的永久链接

`the_author_posts_link()`

输出当前文章作者名称，点击可以跳转到该作者发布的所有文章的地址

`the_time()`

输出帖子的发布时间

`the_post_thumbnail()`

the_post_thumbnail(string|int[] $size='post-thumbnail', string|array $attr='')

获取文章特色图片，如果不传参数，获取特色图片源文件，可以传入缩略图的名称，来引用某种尺寸的缩略图

可以在 functions.php 中定义自定义的缩略图尺寸

`paginate_links()`

获取博客分页器，需要加上 echo 进行输出

当帖子数量不足分页数量时，不会输出分页器

默认情况下，输出默认查询的分页器，如果想要输出自定义查询的分页器，需要指定参数：

echo paginate_links([
  // $pastEvents为自定义查询对象
  // 将自定义查询得到的所有页面数量传给分页器
  'total' => $pastEvents->max_num_pages
]);

`site_url()`

返回站点路径的绝对地址，会自动拼接站点部署的域名

`is_category()`

返回当前页面是否为分类的存档页面

`is_author()`

返回当前页面是否为某作者的存档页面

`single_cat_title()`

输出当前分类标签名称

`the_author()`

输出当前作者名称

`the_archive_title()`

输出当前存档标题，会自动根据存档类别来设置合适的标题，如分类、作者、年、月、日等

`the_archive_description()`

输出当前存档的描述，在管理后台可以设置具体的描述

对于作者存档，将会输出作者的个人说明

对于分类存档，将会输出分类的描述

`WP_Query()`

自定义查询，不使用默认的博客查询，而是自己指定参数进行查询

良好的习惯：在 while 循环结束之后，使用 wp_reset_postdata() 重置文章数据

示例：

<?php
  $today = date('Ymd');
  $homepageEvents = new WP_Query([
    'paged' => get_query_var('paged', 1), // 获取url查询页码，默认值设置为1
    'posts_per_page' => 2,
    'post_type' => 'event',
    'meta_key' => 'event_date', // 自定义字段名
    'orderby' => 'meta_value_num', // 通过自定义字段的值来排序
    'order' => 'ASC', // 升序
    'meta_query' => [ // 多条件查询
      [
        'key' => 'event_date', // 字段名
        'compare' => '>=', // 比较符
        'value' => $today, // 比较值
        'type' => 'numeric' // 指定类型为数值
      ]
    ]
  ]);

  while($homepagePosts->have_posts()) {
    $homepagePosts->the_post();
?>
  <li><?php the_title(); ?></li>
<?php
  }
  wp_reset_postdata(); // 重置文章数据，一个好的习惯
?>

`wp_get_post_parent_id()`

wp_get_post_parent_id($post=null)

返回帖子的父级ID，int或false

`wp_reset_postdata()`

重置文章数据，一般在使用完自定义查询之后要调用一次

`wp_trim_words()`

返回限制字数之后的内容

示例：

<?php echo wp_trim_words(get_the_content(), 18); ?>

**不足：**中文字符串每个字符会当成一个单词，因此中文字符串使用该函数实际返回的字符会比较少

可以使用自定义函数来弥补：

function custom_trim_characters($text, $length, $append = '&hellip;') {
  if (mb_strlen($text) > $length) {
    $text = mb_substr($text, 0, $length) . $append;
  }
  return $text;
}
$trimmed_text = custom_trim_characters(get_the_content(), 100); // 100 是想要裁切的字符数
echo $trimmed_text;

`get_the_excerpt()`

返回文章的摘要

`get_the_category_list()`

get_the_category_list(string $separator='', string $parents='', int $post_id=false): string

获取当前帖子所有的标签，并以 $separator 进行拼接

$parents 如何展现父分类。接受 'multiple' 、 'single' 或空。

`get_theme_file_uri()`

get_theme_file_uri(string $file=''):string

检索并返回主题中文件的 URL

$file 的根目录是当前主题文件夹

`get_post_type()`

获取帖子类型，如 post、page

`get_post_type_archive_link()`

get_post_type_archive_link(string $type)

获取帖子的存档页面

`get_query_var()`

get_query_var(string $query_var, mixed $default_value=''): mixed

获取url中包含的查询参数

可以用来获取分页数：

get_query_var('paged', 1); // 获取url中指定的分页数，如果未指定，使用默认1

关于 WordPress 内置函数是否输出到页面上

例如以下函数

the_title()
get_the_title()

the_ID()
get_the_id()

以 get 开头的函数不会输出到页面上，以 the 开头的函数会输出到页面上

必须插件（must-use-plugins）

在 /wp-content/mu-plugins 目录里面的文件会被作为必须使用的插件加载，无法在管理后台禁用该插件

可以用于自定义帖子类型，启用后就不必担心后台关闭该插件而无法访问已创建的数据

其他插件

Regenerate Thumbnails：根据新的缩略图设置为历史图片生成新的缩略图
Manual Image Crop：手动裁切上传的图片

将重复的模板代码提取到函数中

自定义函数

适用于需要灵活的模板，比如可以传入定制参数

在 function.php 文件中定义函数

// banner模块
  function pageBanner($args=[]) {
    if (empty($args['title'])) {
      $args['title'] = get_the_title();
    }

    if (empty($args['subtitle'])) {
      $args['subtitle'] = get_field('page_banner_subtitle');
    }

    if (empty($args['photo'])) {
      if (get_field('page_banner_background_image')) {
        $args['photo'] = get_field('page_banner_background_image')['sizes']['页面顶部栏'];
      } else {
        $args['photo'] = get_theme_file_uri('/images/ocean.jpg');
      }
    }
?>
    <div class="page-banner">
      <div
        class="page-banner__bg-image"
        style="background-image: url(<?php echo $args['photo']; ?>)"
      ></div>
      <div class="page-banner__content container container--narrow">
        <h1 class="page-banner__title"><?php echo $args['title']; ?></h1>
        <div class="page-banner__intro">
          <p><?php echo $args['subtitle']; ?></p>
        </div>
      </div>
    </div>
<?php
  }

在其他文件中调用该函数获取通用的banner

<?php
  get_header();
  pageBanner([
    'title' => '过去的活动',
    'subtitle' => '回顾我们过去的活动'
  ]);
?>
  <!-- 该模板的其他HTML内容 -->

使用 `get_template_part` 函数

将页面模板保存到单独的php文件中，该模板内使用的变量名等都会在运行时使用引用它的位置的上下文

适用于比较固定的模板

// 无需php后缀
// 假如传入第二个参数 'test'
// 则等同于第一参数传入了 'template-parts/event-test'
// 基于这一点，可以将第二参数改为动态函数，然后可以实现自动加载特定的模板
// 例如使用 get_post_type()
get_template_part('template-parts/event');

Files

学习指南.md

Latest commit

History

学习指南.md

File metadata and controls

目录

WordPress 主题特殊文件的作用。

index.php

style.css

screenshot.[png|jpg|jpeg]

single.php

single-*.php

page.php

page-*.php

archive.php

archive-*.php

header.php

footer.php

functions.php

front-page.php

显示页面导航菜单（父子页面）

动态菜单

自定义帖子类型

自定义字段

其他

WordPress 函数

have_posts()

has_excerpt()

the_title()

the_content()

the_excerpt()

the_permalink()

the_author_posts_link()

the_time()

the_post_thumbnail()

paginate_links()

site_url()

is_category()

is_author()

single_cat_title()

the_author()

the_archive_title()

the_archive_description()

WP_Query()

wp_get_post_parent_id()

wp_reset_postdata()

wp_trim_words()

get_the_excerpt()

get_the_category_list()

get_theme_file_uri()

get_post_type()

get_post_type_archive_link()

get_query_var()