编程 – 第 3 页

2021年1月15日2023年2月3日

WordPress 101 主题开发教程: 06 – 使用add_themesupport给主题扩展内置功能

WordPress 101 – Part 6: How to add Theme Features with add_theme_support

视频学习参考： https://www.youtube.com/watch?v=ghmdq1hEm14&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=6

1.设置主题自定义背景图, 打开functions.php

add_theme_support(‘custom_background’); // 从WordPress 3.9开始支持

刷新后就可以在外观中看到背景点击进入即可进行设置

2.设置头部自定义背景设置，打开functions.php

add_theme_support(‘custom-header’);

打开header.php

<img src=”<?php header_image(); ?>” height=” <?php echo get_custom_header()->height; ?> ” width=” <?php echo get_custom_header()->width; ?> ” alt=”” />

3.文章图片的缩略图，打开functions.php

add_theme_support(‘post-thumbnails’);

打开index.php

Super Simple!

2021年1月15日2023年2月3日

WordPress 101 主题开发教程: 05 – 创建指定页面模板

WordPress 101 – Part 5: How to create Custom and Specialized Page Templates

视频学习参考： https://www.youtube.com/watch?v=aUxDz7vXilQ&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=5

1.创建page-about-me.php会自动映射给关于页面

注：发现/about-me/这个别名没设置设置了之后又是404 于是一番查询

发现是nginx配置信息的问题参考下面的链接配置

https://wordpress.org/support/article/nginx/

其实重点就是缺少这个

location / {

# This is cool because no php is touched for static content.

# include the "?$args" part so non-default permalinks doesn't break when using query string

try_files $uri $uri/ /index.php?$args;

}

配置完重启下nginx 就可以了

映射生效终于可以用英文名访问了，其实别名取为中文也可以访问到

2.通过页面中设置模板选择指定模板页面

页面编辑中右侧选择指定模板

Super Easy!

2021年1月15日2023年2月3日

WordPress 101 主题开发教程: 04 – 循环显示文章以及自定义动态body class

WordPress 101 – Part 4: How to use the Post Loop and custom body class

视频学习参考： https://www.youtube.com/watch?v=pJ4NTBdvyj4&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=4

1.循环显示文章，打开index.php

<?php

if ( have_posts() ): //:类似于{}是循环体的WordPress风格惯用写法

while( have_posts() ): the_post();

<hr />

endwhile;
endif;

2.设置首页展示模式

在设置阅读中，展示模式分为2种：

<1> 最新发表的文章以index.php为底板

<2> 一个静态页面

主页以front-page.php为底板读取后台页面中的内容

文章页列表以index.php为底板内容以single.php为底板

<3> 其他页面结构底板探索

某分类cat下列表页底板以archive.php为底板

某p下列表页底板以single.php为底板

page_id页面底板以page.php为底板

【当page_id设置为静态页面时以index.php为底板】

3.自定义动态body class ，打开header.php

4.区别 is_home() is_front_page()

如果设置的首页展示模式是最近的博客，则 is_home() 方法是有效的

如果设置的首页展示模式是静态页面，则判断首页应该使用 is_front_page()

Super Easy!

2021年1月15日2023年2月3日

WordPress 101 主题开发教程: 03 – 创建自定义菜单

WordPress 101 – Part 3: How to create custom menus

视频学习参考： https://www.youtube.com/watch?v=Sz0z-Gyp3nA&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=3

1.在funtions.php中加入

function z_theme_setup() {
add_theme_support(‘menus’);
}
//参数1 也可以使用 ‘init’ 代替
add_action(‘after_setup_theme’, ‘z_theme_setup’)

2.刷新后台在外观中就可以看到新出现的菜单功能

3.设置菜单绑定标识

//参数1 菜单标识名称
//参数2 菜单描述说明
register_nav_menu(‘primary’, ‘Primary Header Navigation ‘)

4.设置菜单显示位置加入到header.php 或者 footer.php中

<?php wp_nav_menu(array(‘theme_location’ => ‘primary’)); ?>

总结：本次学习体会到了WordPress的菜单设计思想，菜单可以无限创建，但是在代码中设置加入菜单与显示位置的中间件绑定标识(register_nav_menu)，菜单的显示位置由模板代码(绑定标识)决定(这样就可以同时插入多个位置)，位置上显示何种菜单就可以在后台进行绑定。这样做就可以设置不同的顶部和底部的菜单了，如顶部为分类导航，底部为个人微博博客等。

2021年1月15日2023年2月3日

WordPress 101 主题开发教程: 02 – 加入CSS和JS到主题结构中

WordPress 101 – Part 2: How to properly include CSS and JS files

视频学习参考：https://www.youtube.com/watch?v=NF6r3Ejpris&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=2

1. 在主题目录中创建资源文件夹和自定义css和js文件

assets/css/z.css

assets/js/z.js

2. 在主题目录中创建functions.php文件（WordPress主题结构可选文件【其实意义上是必须的且名称不可更改】）并使用hooks引入，直接加入WordPress不推荐不安全

3. 在functions.php中加入CSS

<?php
function z_script_enqueue() {
//加入css到模板文件中
//参数1 handle 必填调用的样式文件名称实际会显示到id=handle中
//参数2 src 可选文件位置绝对路径
//参数3 deps 可选依赖关系如 array( ‘jquery’ ) 就是从wp-includes/js/jquery/jquery.js 中加入这个依赖的js
//参数4 ver 可选版本号会追加在url最后.css?ver=xxx
//参数5 media 可选 css文件使用范围 all 或者 types like ‘all’, ‘print’ and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’.
wp_enqueue_style(‘customstyle’, get_template_directory_uri() . ‘/assets/css/z.css’, array(), ‘1.0.0’, ‘all’ );
}

//tag hooks调用的方法WordPress方法
//funtion_to_add 调用的自定义方法
//priority
//accepted_args
add_action(‘wp_enqueue_scripts’, ‘z_script_enqueue’);

4. 在header.php中加入显示代码识别wp_enqueue_style加入css会自动加载到wp_head();位置

<?php wp_head(); ?>

5. 同理，在funtions.php中加入JS

//参数5 不同 in_footer 是否加入在footer位置影响网页加载速度
wp_enqueue_script(‘customjs’, get_template_directory_uri() . ‘/assets/js/z.js’, array(), ‘1.0.0’, true);

5.同理，在footer.php中加入显示代码识别wp_enqueue_script 会根据参数5加入wp_head(); 还是 wp_footer();位置

<?php wp_footer(); ?>

Super Easy!

2021年1月15日2023年2月3日

WordPress 101 主题开发教程: 01 – 从头开始创建一个主题

01 – 从头开始创建一个主题

引言：终于有时间把以前的想要学(其实早就该学)的知识进行整理学习，不想花太多时间，但又不得花多的时间，废话少说加油吧！
Thanks! Alessandro Castellani !

视频学习参考：https://www.youtube.com/watch?v=oTRZYnYQlmo&list=PLriKzYyLb28nUFbe0Y9d-19uVkOnhYxFE&index=1

第一节内容：主要讲解了WordPress的目录结构，只需要关心wp-content目录即可

wp-content/themes 和 wp-content/plugins 分别对应着主题和插件

开发环境开启：

1. 开启开发环境：首先需要打开debug参数开关，在根目录的wp-config.php文件中修改为

define(‘WP_DEBUG’, true);

然后进入主题文件夹 wp-content/themes 创建自己的主题目录比如 z

2. 创建2个必要结构文件：

第1个重要的识别文件 style.css 内容要按照标准再顶部加入注释格式

/*
Theme Name: z
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 2.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: black, white, one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

第2个重要的模板文件index.php

<?php get_header(); ?>
<h1>This is my index
<?php get_footer(); ?>

3. 创建模板头尾部文件header.php footer.php

Super easy! Super beginer beginer!