博客

WordPress 101 – Part 10: Filter the WP_Query with categories

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

本节课的重点函数是 get_categories();

$args_cat = array( ‘include’ => ‘1, 9 ,8’);

$categories = get_categories($args_cat);

foreach($categories as $category):

$args = array(
    'type' => 'post',
    'posts_per_pages' => 1,
    'offset' => 0,
    //'category__in' => array(),
    //'category__not_in' => array(),
   'category__in' => array($category->term_id), 
);
$lastBlog = new WP_Query($args);
if ( $lastBlog -> have_posts() ) :
    while ( $lastBlog -> have_posts() ) :
        $lastBlog -> the_post();
        the_title();
    endwhile;
endif;

endforeach;

** 当一篇文章选择归属于2个分类时 会同时属于2个分类

Super happy!

WordPress 101 – Part 9: Edit the query_posts with WP_Query

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

1.可以建立一个新的模板页面 比如 page-home.php

2.重点学习使用 WP_Query()和参数传递

$lastBlog = new WP_Query(‘type=post&posts_per_page=2&offset=1’);

$lastBlog = new WP_Query(array(

‘type’ => ‘post’, ‘posts_per_page’ => 2, ‘offset’ => 1

));

//重置查询

wp_reset_postdata();

Super Simple!

WordPress 101 – Part 8: How to create Sidebar and Widgets areas

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

在这节课之前 作者进行了主题的Q&A并优化美化了主题:https://www.youtube.com/watch?v=OSYbTkzuyDg

在这个视频中可以查看之前的变化更新，补充的开发教程也记录在上一篇文章中

本节课主要说明了如何激活并加载侧边栏和插件区域，虽然写做“和”，但是他们其实指的是同一个内容。

1.在functions.php激活侧边栏插件功能

function twentyseventeen_widgets_init() {
   register_sidebar(
      array(
         'name'          => __( 'Blog Sidebar', 'twentyseventeen' ),
         'id'            => 'sidebar-1',
         'class'         => 'customxsidebar',/*此处的class仅会在后台编辑的时候出现*/
         'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ),
         'before_widget' => '<section id="%1$s" class="widget %2$s">',/*注意此处的id 和 class 的 %1$s 使用的是各自小组件的id和class*/
         'after_widget'  => '</section>',
         'before_title'  => '<h2 class="widget-title">',
         'after_title'   => '</h2>',
      )
   );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

2.编写sitebar.php 侧边栏插件区的结构文件 用于展示侧边栏

<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
   return;
}
?>

<aside id="secondary" class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Blog Sidebar', 'twentyseventeen' ); ?>">
   <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

3.在index.php 或者 page.php中开启侧边栏插件区显示

<?php get_sidebar(); ?>

Super Easy!

WordPress Theme Development Live Session + Q&A

视频学习参考: https://www.youtube.com/watch?v=OSYbTkzuyDg

作者在下节课和上节课中间加入了一节在线交流

重点讲解了以下内容：

1.加入内置jquery

wp_enqueue_script(‘jquery’);

2.加入第三方组件： bootstrap

wp_enqueue_style( 'bootstrap-css' , get_template_directory_uri() . '/assets/libs/bootstrap/css/bootstrap.min.css', array(), '5.0.0', 'all' );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/libs/bootstrap/js/bootstrap.min.js', array(), '5.0.0', true );

3.引入bootstrap css框架

4.合并到bootstarap顶部导航菜单 复制bootstrap导航代码 结合下方代码

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘container’ => false, ‘menu_class’ => ‘nav navbar-nav navbar-right’ ) );

5.修改文章列表

//the_title( before, after);
//参数1 前半段标签及标题
//参数2 后半段闭合标签
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );

6.推荐参考codex.wordpress.org进行开发

https://codex.wordpress.org/

中文：https://codex.wordpress.org/zh-cn:Main_Page

7.作者使用插件

Akismet

Contact Form 7

Caryon Syntax Highlighter

Disqus Comment System

Jetpack by WordPress.com

TinyMCE Advanced

WordPress SEO

WP-PageNavi

WP Lightbox 2

Hopefully!

WordPress 101 – Part 7: How to add and create Post Formats

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

1.启用文章类型功能支持, 打开functions.php

//一共有9种支持的文章类型 从4.1.2版本开始

add_theme_support(‘post-formats’, array(‘aside’, ‘image’, ‘video’));

2.通过 get_post_format() 返回 当前文章的格式

3.在index.php的post循环中 加入

<?php get_template_part(‘content’, get_post_format()); ?> //会自动寻找content-xxx.php作为底板，如果content-xxx.php不存在则用content.php

取代原来的内容展示 并将内容展示移入 content.php中

4.创建不同的content-xxx.php

Super Simple!

P.S. aside是日志的意思

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

<div class=”thumbnail-img”><?php the_post_thumbnail(‘thumbnail’); ?></div>

Super Simple!

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!

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();

<h3> <?php the_title(); ?> </h3>

<small>发表于 <?php the_time(‘Y F j’); ?> <?php the_time(‘g:i a’)?> 分类 <?php the_category(); ?>

<p> <?php the_content(); ?> </p>

<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

<body <? php body_class(array()); ?>

4.区别 is_home() is_front_page()

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

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

Super Easy!

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)，菜单的显示位置由模板代码(绑定标识)决定(这样就可以同时插入多个位置)，位置上显示何种菜单就可以在后台进行绑定。这样做就可以设置不同的顶部和底部的菜单了，如顶部为分类导航，底部为个人微博博客等。

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!