merce主题开发篇课程附件

1、merce 主题开发一、开发插件推荐注意：这里推荐的插件，只需要在本地开发环境中安装，无需在实际生产环境安装。1、Query Monitor2、Debug BarDebug Bar 是一款插件，但提供的信息有些少。但可以安装debug bar 的插件，实现获取对开发者有用的信息。二、主题开发要点回顾1、最小主题一个主题中，可以包含无数个文件。但想要让 wordpress 能正常识别你的主题，必须包含两个文件lstyle.css并且在 style.css 中必须包含 wordpress 能够识别的头部注释，如lindex.php必须要包含的模版文件。/*Theme Name: 主题名称*/2、模

2、版层级模版层级描述的是，当用户容展示给用户。站点中的一个页面时，wordpress 会将主题中哪个文件的内-3、数据调用模版层级控制的是，当用户某个网页时，将显示哪个模版文件中的内容。而数据调用则控制着到底要显示哪些内容给用户。3.1、默认调用在你WordPress 站点的任何一个页面（比如，文章详情页、分类归档页）时，WordPress会根据请求的，将数据调用出来。在页面的对应模版文件中，添加如下代码，可以查看默认的数据调用结果<pre><?php global $wp_query;print_r($wp_query);?></pre>3.2、数据显示用循

3、环结构，分别显示获取到的内容。再用 the_title()这些模版，获取并显示想要的信息。<?php if(have_posts(): ?><?php while(have_posts():the_post(); ?><div class="item" style="padding:15px;border:1px solid red;"> 图片：<?php the_post_thumbnail('thumbnail'); ?><br /> 标题：<?php the_titl

4、e(); ?><br />：<a href="<?php the_permalink(); ?>">url</a><br/>摘要：<?php the_excerpt(); ?><br />正文：<?php the_content(); ?><br />时间：<?php echo get_the_date('Y-m-d H:i:s'); ?><br />作者：<?php the_author_posts_link();

5、 ?><br />分类：<?php the_category(); ?>：<?php the_tags(); ?><br />评论：<?php comments_popup_link('0 条评论','1 条评论','%条评论'); ?><br/>评论：<?php if(comments_open() comments_template(); ?></div><?php endwhile; ?><?php endif; ?>

6、;3.3、自定义调用3.4、自定义调用数据的显示4、样式当熟悉模版层级和数据调用后，那么你可以控制任何一张网页的 HTML 结构（比如，标题放在 h1、h2 还是其他重）。然后，再给网页配上合适的 CSS 样式或 JS，那么你的网页外观就会变得更加美观、人性化。<?php if($my_query->have_posts(): ?><?php while($my_query->have_posts():$my_query->the_post(); ?><div class="item" style="padding:

7、15px;border:1px solid red;">标题：<?php the_title(); ?><br />：<a href="<?php the_permalink(); ?>">url</a><br/>摘要：<?php the_excerpt(); ?><br />正文：<?php the_content(); ?><br />时间：<?php echo get_the_date('Y-m-d H:i:s'

8、); ?><br />作者：<?php the_author_posts_link(); ?><br />分类：<?php the_category(); ?>：<?php the_tags(); ?><br />评论：<?php if(comments_open()&&is_single() comments_template(); ?></div><?php endwhile; ?><?php endif; ?><?php wp_reset_p

9、ostdata(); /清楚自定义调用对默认调用的影响?><?php/ 自定义调用数据$my_query = new WP_Query(array( 'post_type'=>'post','post in'=>array(1);?>/ 在主题的 functions.php 中，通过以下代码可以给站点添加样式和/ 前提是，在主题的模版文件中要调用wp_head() 和 wp_footer()两个函数function my_theme_scripts() wp_enqueue_style('xx-css'

10、;, get_template_directory_uri() . '/js/.js',array();wp_enqueue_script('xx-js', get_template_directory_uri() . '/js/.js', array(), '', true );add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );三、内容类型1、为什么需要当你的要发布的信息，有明显的不同的时候，那么最好能将它们单独管理。例如你的内容有一部分

11、是以文字信息为主的内容，而另一部分是以图片为主的内容。那么，最好的管理方式，不是将它们放在一起，然后根据不同的分类进行区分。最好的管理方式，是有一个地方专门用于发布管理文字信息（比如，在文章里发布文字信息），图片信息则放到另外一个地方进行统一发布管理（就像管理文章一样）。2、添加新类型/ 在主题的 functions.php 中，使用如下代码，可以创建新的内容类型function wpkt_custom_post_type()$labels = array('name'=> '图片', 'singular_name' => '

12、图片', 'add_new'=> '发布图片', 'all_items'=> '图片列表');$args = array('labels'=> $labels,'public'=> true, 'has_archive' => true,'rewrite'=> array('slug' => 'pics'),);/调用 register_post_type()函数register_pos

13、t_type('pics', $args);/将自定义函数挂载到 init 钩子下add_action('init', 'wpkt_custom_post_type');3、自带的类型WordPress 自带的内容类型有文章类型(post)、页面类型(page)、附件类型(attachment)、菜单类型(revision)、版本修订类型4、内容类型模版层级4.1、内容类型归档页的模版层级特别提醒：在添加自定义内容类型时，可以指定当前内容类型是否存在归档页。只有当存在内容类型归档页时，才按照对应的模版层级规则去使用模版文件。4.2、详情页的模版层

14、级特别提醒：在添加自定义内容类型时，可以指定当前内容类型下具体的内容是否有详情页。有详情页，才会按照模版层级的规则使用模版。在 wordpress4.7 及以后，你可以给任何内容类型添加自定义模版。具体操作方法是，在你的主题中创建一个php 文件，并在头部添加如下注释。<?php/*Template Name: Full-width layout Template Post Type: post, page*/ 页面的正常代码5、WCC 添加的内容类型merce 也给你的站点添加了新的内容类型，如下lproduct类型有归档页、有详情页lproduct_variation可能类型无归档页

15、、无详情页lshop_order订单类型无归档页、无详情页lshop_order_refund退款类型无归档页、无详情页lshop_webhookwebhook 类型无归档页、无详情页四、分类方式1、什么是分类方式同一类事物，往往从不同的角度，可以分成不同的情形。比如你衣柜里有很多的衣服（一类事物），从颜色的角度，可以分为黑色、绿色、黄色等情形；从穿在哪里的角度，可以分为上身、下身等情形；从穿着的场合，可以分为休闲、商务等情形。那么从哪角度去归纳，那么这个角度就是分类方式。回到 worpdress，你发布的一篇篇文章就是前面案例中的“一类事物”，而分类目录和是对文章归纳整理的角度，也就是所谓的

16、“分类方式”。就2、什么是分类项目所谓分类项目，就是从某个角度归纳，具体分出的情形。比如，衣服从颜色的角度，可以分为黑色、绿色、黄色等情形。其中，黑色、绿色、黄色就是分类项目。而 wordpress 中，你创建的分类目录和，就是特定的分类方式下的分类项目。3、分类方式和内容类型相关当创建分类方式时，必须指出是针对哪种内容类型的。比如，分类目录这种分类方式就是针对文章这种类型的。4、自带的分类方式分类目录（category），是针对文章的一种分类方式。（post_tag），也是针对文章的一种分类方式。形式（post_format），也是针对文章的一种分类方式。菜单（nav_），针对菜单（）的一种

17、分类方式。5、添加自定义分类方式/ 在主题的 functions.php 中添加如下代码，可以给图片类型添加分类方式function wpkt_create_tax()$labels = array('name' => '图片分类', 'singular_name' => '图片分类', 'search_items' => '搜索图片分类', 'popular_items' => '','all_items' => 

18、9;所有图片分类', 'parent_item' => '父级图片分类', 'parent_item_colon' => '父级图片分类：', 'edit_item' => '编辑图片分类','view_item' => '查看图片分类', 'update_item' => '更新图片分类', 'add_new_item' => '添加新图片分类', '

19、new_item_name' => '新图片分类名', 'separmas' => '','add_or_remove_items' => '', 'choose_from_most_used' => '', 'not_found' => '未找到分类。', 'no_terms' => '没有图片分类', 'items_list_navigation' =>

20、; '分类列表导航',6、分类项目归档页模版层级特别提醒：并不是每个分类方式下的、分类项目都有归档页（可在添加自定义分类方式时指定是否有分类项目归档页）。'items_list' => '分类列表','_name' => '图片分类',);$args = array('labels'=> $labels,'description'=> '','public'=> true,'publicly_queryable&#

21、39;=> true, 'hierarchical'=> false, 'show_ui'=> true,'show_in_'=> true, 'show_in_nav_s'=> true, 'show_tagcloud'=> true, 'show_in_quick_edit'=> true, 'show_admin_column'=> true, 'meta_box_cb'=> null,'capabi

22、lities'=> array(),'rewrite'=> true,'query_var'=> true, 'update_count_callback' => '',);register_taxonomy('pic_cat', 'pics', $args);add_action('init', 'wpkt_create_tax');7、WCC 定义的分类方式l分类（product_cat）有归档页针对（product）l（produ

23、ct_tag）有归档页针对（product）l类型（product_type）无归档页针对（product）l可见性（product_visibility）无归档页针对（product）l配送类型（product_shipping_class） 无归档页针对（product）和可能l全局属性五、短代码1、短代码作用在发布内容的时候（如文章），在文章添加符合规范的标记（如，wpkt）。在前台展示文章内容的时候，可以将正文中的标记替换成别的内容，至于替换成什么内容，由开发者所写的代码决定。2、短代码案例2.1、短代码/wpkt短代码/ 在主题的 functions.php 中添加如下代码/ 作用是

24、将正文中的wpkt，替换成<h2>WordPress 课堂</h2> function wpkt_shortcode_handler($atts = array(), $content = null, $tag = '')$content = '<h2>WordPress 课堂，</h2>' return $content;function wpkt_shortcode_register()add_shortcode('wpkt', 'wpkt_shortcode_handler')

25、;add_action('init', 'wpkt_shortcode_register');2.2、在正文中使用2.3、前台查看页面结果2.4、短代码的其它用法当好短代码后，除了直接在内容的正文中使用短代码外，你可以通过以下的代码，在任何地方去使用。 <?php echo do_shortcode('wpkt'); ?>3、WCC的短代码六、WCC 模版层级1、详情页模版层级特别说明#1：0 的优先级最高，数字越大优先级越低。掌握模版层级的最有效方法，就是亲自动手测试。测试方法为先创建优先级低的模版文件，再创建优先级高的模版文件，哪

26、个模版文件。同一个详情页查看到底用了特别说明#2：0 =>merce.php1 => $custom.php/ 自定义模版文件，如设置的话2 => single-product.php3 =>merce/single-product.php4 =>merce/templates/single-product.php/ wcc 插件中的模版文件2、分类归档页模版层级其中$slug 代表的是分类的别名0 =>merce.php1 => taxonomy-product_cat-$slug.php2 =>merce/taxonomy-product_c

27、at-$slug.php3 => taxonomy-product_cat.php4 =>merce/taxonomy-product_cat.php5 =>merce/templates/taxonomy-product_cat.php3、归档页模版层级4、全局属性归档页模版层级0 =>merce.php1 => taxonomy-product_tag-$slug.php2 =>merce/taxonomy-product_tag-$slug.php3 => taxonomy-product_tag.php4 =>merce/taxonomy

28、-product_tag.php5 =>merce/templates/taxonomy-product_tag.php特别说明#1：$attr_slug 指的是全局属性的别名，即特别说明#2：$term_slug 指的是全局属性下具体项目的别名，即0 =>merce.php1 => taxonomy-pa_$attr_slug-$term_slug.php2 =>merce/taxonomy-pa_$attr_slug-$term_slug.php3 => taxonomy-pa_$attr_slug.php4 =>merce/taxonomy-pa_$a

29、ttr_slug.php5 => archive-product.php6 =>merce/archive-product.php7 =>merce/templates/archive-product.php5、WCC 创建的页面模板层级5.1、页面5.2、账户页普通页面，按照WordPress 默认的模板层级规则来5.3、结算页5.4、购物车页0 =>merce.php1 => archive-product.php2 =>merce/archive-product.php3 =>merce/templates/archive-product.php

30、5.5、用户协议页七、钩子机制钩子是 hook 单词的翻译1、快速案例1.1、创建一个模板文件，并添加如下大代码1.2、在前台查看页面的结构<!-模板文件，例如 index.php 中的代码-><!doctype html><html lang="en"><head><meta charset="UTF-8"><title><?php echo apply_filters('wpkt_title', '标题'); ?></title&

31、gt;<?php do_action('wpkt_head'); ?></head><body>index.php</body></html>1.3、在主题 functions.php 中添加如下代码1.4、继续在 functions.php 中添加代码/ 修改wpkt_title 处的数据function sfilter_wpkt_title($title) $title = '第二次标题' return $title;/ wpkt_titlefunction filter_wpkt_title($t

32、itle) $title = '新的标题' return $title;add_filter('wpkt_title', 'filter_wpkt_title');/ wpkt_headfunction add_desc_wpkt_head() echo '<meta name="description" content="这是页面的描述" />'add_action('wpkt_head', 'add_desc_wpkt_head');add_f

33、ilter('wpkt_title','sfilter_wpkt_title', 8);/ wpkt_head 处添加function add_kw_wpkt_head() echo '<meta name="keywords" content="add_action('wpkt_head', 'add_kw_wpkt_head');">'2、机制总结2.1、作用某个地方的功能，允许你在别的地方修改。比如说当你想修改某个地方的功能（如，修改上述案例中的标题），你可

34、以不用直接修改功能所在地的代码，而是在别的地方实现修改（在 functions.php）。这对开发者来说非常友好。因为比如，你修改了一部分 wordpress 的文件，但一旦更新wordpress 的版本，那么你的修改就不见了，你还得重新再改一次。但一旦使用钩子机制，那么你就不用修改文件、再其他地方（比如主题、插件）就能更改功能，且你的修改不受 wordpress 更新的困扰。2.2、概念2.2.1、啥是钩子2.2.2、钩子类型#1: 动作(action)钩子无返回数据，关注的只是要干什么。#2: 过滤(filter)钩子特点是，一定要将修改后的数据返回（return），后续的代码会用到。2.

35、3、顺序钩子机制，最大的特点就是，将执行和挂载的过程分离。一旦分离，就得区分出先后顺序。就像去吃自助餐，你能吃到食物的前提，是餐厅要先将食物摆在指置。执行的过程，就像是吃食物的过程；挂载的过程，就像是准备和摆食物的过程。顺序总结：1.先挂载函数到钩子2.后执行钩子上函数3、重要函数3.1、执行钩子上函数a)apply_filters( $tag, $value, $value2. )/ 执行过滤钩子下的函数b)do_action($tag, $arg = '')/执行动作钩子下的函数3.2、挂载函数到钩子a)add_filter( $tag, $function_to_add,

36、 $priority = 10, $accepted_args = 1 )b)add_action($tag, $function_to_add, $priority = 10, $accepted_args = 1)add_filter()，是将函数挂载到某个过滤类型的钩子上；add_action()，是将函数挂载到某个动作类型的钩子上。4、应用广泛八、数据调用1、默认数据调用1.1、详情页1.1.1、查看$wp_query在详情页、分类页、页、以及全局属性页（的话）对应的模版文件中，添加如下代码在浏览器中对应的页面，你会发现的数据已经被调取出来了。<?php global $wp_q

37、uery; ?><pre><?php print_r($wp_query); ?></pre>1.1.2、循环结构1.1.3、查看$product当 wordpress 执行到循环结构中的 the_post()函数时，会创建一个全局变量，名字叫做$product（里面着的相关数据）。可以通过以下代码查看特别说明：$product 不是一个普通的变量，它是一个对象。其给开发者提供了很多有用的方法（函数），通过这些方法可以方便获取的各种数据信息。<?php if(have_posts(): ?><?php while(have_posts

38、():the_post(); ?><?php global $product; ?><pre><?php print_r($product); ?></pre><?php endwhile; ?><?php endif; ?><?php if(have_posts(): ?><?php while(have_post():the_post(); ?><?php endwhile; ?><?php endif; ?>1.1.4、查看对象所属类1.1.4.1、查看单一所属类

39、1.1.4.2、查看外接所属类1.1.4.3、查看成组所属类1.1.4.4、查看可变所属类1.1.5、调用显示数据1.2、分类页当你掌握了详情页的数据调用及显示，那么掌握分类页的数据调用就易如反掌。因为前面介绍的，$product 变量在循环结构内仍然可用，而且上面介绍的函数、方法仍然有效。1.2.1、获取分类图片在分类归档页，获取该分类图片（发布分类时设定的）的方法1.2.2、列表分页函数归档页、分类页、页以及全局属性页，如果一页无法展示全部的，则需要展示分页，让用户能够查看1.2.3、修改每页数量add_filter('loop_shop_per_page','mo

40、d_product_per_page'); function mod_product_per_page($num) if (is_shop() $num = 2;/页，每页显示 2 个<?phpmerce_pagination(); ?><?php/ 获取当前的分类项目$term = get_queried_object();/ 获取当前分类项目设定的图片 ID$thumbnail_id =merce_term_meta($term->term_id, 'thumbnail_id', true);/ 根据图片 ID 编号获取图片echo wp_g

41、et_attachment_image($thumbnail_id, 'shop_thumbnail');?>1.3、页同详情页的数据调用1.4、全局属性页仅当创建的全局属性勾选了“启用存档”时，全局属性才有归档页，也就是这里所说的全局属性页。同详情页的数据调用 else if(is_product_category() $num = 4;/ 分类页，每页显示 4 个 else $num = 3;/ 其他页，每页显示 3 个return $num;2、WCC 条件2.1、是否是页2.2、是否是分类页例如，is_product_ctegory()，是否是归档页is_prod

42、uct_category('shirts')，是否是别名为shirts 的归档页is_product_category(array( 'shirts', 'games' )，是否是别名为 shirts 或者 games 的页归档2.3、是否是页参数和 is_product_category()一样2.4、是否是详情页function is_product() return is_singular( array( 'product' ) );function is_product_tag( $term = '' )

43、return is_tax( 'product_tag', $term );function is_product_category( $term = '' ) return is_tax( 'product_cat', $term );function is_shop() return ( is_post_type_archive( 'product' ) | is_page( wc_get_page_id( 'shop' ) ) );2.5、是否是购物车页2.6、是否是结算页2.7、是否是账户页2.8、条件函数

44、的定义统一位于merce/includes/wc-conditional-functions.phpfunction is_account_page() return is_page( wc_get_page_id( 'myaccount' ) ) | wc_post_content_has_shortcode('merce_my_account')| apply_filters( 'merce_is_account_page', false );function is_checkout() return is_page( wc_get_page

45、_id( 'checkout' ) ) | wc_post_content_has_shortcode('merce_checkout')| apply_filters( 'merce_is_checkout', false ) | defined( 'MERCE_CHECKOUT' );function is_cart() return is_page( wc_get_page_id( 'cart' ) ) | defined( 'MERCE_CART' ) | wc_post_content_h

46、as_shortcode( 'merce_cart' );3、自定义数据调用2.1、可见性2.2、获取指定分类目录下的<?php/* 获取所有有货、页可见* 并且* 在别名为 other 的分类中的* 所有*/$my_query = new WP_Query(array( 'post_type' => 'product', 'posts_per_page'=> -1,'tax_query' => array ( / 根据自定义分类方式去'relation' => 

47、9;AND', array('taxonomy'=> 'product_visibility', 'field'=> 'slug','terms'=>array('exclude-from-catalog','outofstock'), 'operator'=>'NOT IN'),array(2.3、获取要么在指定要么在指定分类目录/* 获取所有可见* 并且* 要么在 t-shirt 分类项下、要么在 zise下的* 所

48、有*/$my_query = new WP_Query(array( 'post_type' => 'product', 'posts_per_page'=> -1,'tax_query' => array ( / 根据自定义分类方式去'relation' => 'AND', array('taxonomy'=> 'product_visibility', 'field'=> 'slug','

49、terms'=>array('exclude-from-catalog','outofstock'), 'operator'=>'NOT IN'),array('relation'=>'OR', array('taxonomy'=> 'product_cat', 'field'=> 'slug','terms'=> 't-shirts''taxonomy

50、' => 'product_cat', 'field'=> 'slug','terms'=> 'other',);?><?php if($my_query->have_posts(): ?><?php while($my_query->have_posts():$my_query->the_post(); ?><?php global $product; ?><pre><?php print_r($product

51、); ?></pre><?php endwhile; ?><?php endif; ?><?php wp_reset_postdata(); ?>2.4、获取所有推荐/* 获取可见（没有被隐藏、且有库存）的推荐*/$my_query = new WP_Query(array( 'post_type' => 'product', 'posts_per_page'=> -1,'tax_query' => array ( / 根据自定义分类方式去'relat

52、ion' => 'AND', array('taxonomy'=> 'product_visibility', 'field'=> 'slug','terms'=>array('exclude-from-catalog','outofstock'), 'operator'=>'NOT IN'),array('taxonomy' => 'product_visibilit

53、y', 'field'=> 'slug','terms'=> 'featured',),array('taxonomy'=>'product_tag', 'field'=>'slug','terms'=>'zise');?><?php if($my_query->have_posts(): ?><?php while($my_query->have_posts()

54、:$my_query->the_post(); ?><?php global $product; ?><pre><?php print_r($product); ?></pre><?php endwhile; ?><?php endif; ?><?php wp_reset_postdata(); ?>);?><?php if($my_query->have_posts(): ?><?php while($my_query->have_posts():$my_que

55、ry->the_post(); ?><?php global $product; ?><pre><?php print_r($product); ?></pre><?php endwhile; ?><?php endif; ?><?php wp_reset_postdata(); ?>九、其他页面数据1、购物车页面数据2、结算页面数据3、账户页面数据十、WCC和样式1、关于JS一般情况下，不需要去移除 wcc 自动加载到前台页面的js。2、关于CSS 样式2.1、覆盖 CSS 样式规则如果你要制作的

56、主题，只是在merce 提供的样式的基础上做些修改，那么你可以在wcc 样式的基础上，覆盖调你不满意的地方。2.2、全新 CSS 样式规则如果你的主题样式设计和WCC 完全不一样，那么就没有必要再加载 wcc 默认的样式了，你只需要加载你自己的样式即可。这时，你需要移除wcc 提供的默认样式，代码如下/ 在主题的 functions.php 中使用此代码/ return_empty_array 是wordpress 提供的一个函数名，返回的是空数组add_filter( 'merce_enqueue_styles', ' return_empty_array'

57、);十一、WCC 主题开发总结1、主题中支持 wcc如果主题没有支持merce，则在会出现这样的提示。支持的方法为2、主题开发的两种方式2.1、式所谓式，其实就是当你掌握 WCC相关页面的模版层级，自己根据模版层级去创建模版文件。然后，在模版文件中去调用你想要的数据，并且以一种特定的 html 结构呈现出来。最后，再根据最终展示出来的 html 结构去写CSS 样式，并最终实现你想要的效果。这种方式，就是我们已经习惯的主题开发的方式。2.2、覆盖式merce 已经提供了一套完整的模板文件。在开发兼容 WCC 的主题时，首先考虑的不是要自己去写所有的模板，而是在 WCC 模板的add_actio

58、n( 'after_setup_theme', 'merce_support' ); functionmerce_support() add_theme_support( 'merce' );/支持merce基础上去修改，比如，去修改数据的输出结构等。除非你想要展示的内容，和 WCC 提供的模板文件有非常大的区别时，才考虑采用“开发主题。式”建议#1：优先修改以修改wcc 自带的模版文件的方式去制作主题。虽然，刚开始过程会有点辛苦，因为这种方式将会大量使用钩子机制，会有点绕。但是，钩子机制是 wordpress 的，也是其能够被随意扩展和修改的根源，这个精髓一定要掌握。而通过阅读和修改 wcc 的自带模版，可以强化理解。建议#2：强烈建议在制作静态网页之前，熟悉 WCC 重要页面（账户、结算、购物车）的 html 结构，并采用同样的html 结构去写 CSS 样式。这样的话，你就不需要去修改相关短代码的输出函数了（难度更高些）十二、覆盖式主题开发要点1、重要函数1