整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
前面的章节中，我们创建了wordpress主题trans的公共模板：header.php头部模板、sidebar.php侧边栏模板、footer.php底部模板，这样就更加方便了trans主题的其它动态模板的开发。就比如，今天我们要开发的模板——文章列表页模板，就不需要再去修改头部、侧边栏、底部的代码了。好了，闲话不多说，我们直接进入到今天的主题当中，怎样添加trans主题的文章列表页模板？
第一步：创建列表页模板文件。
在trans主题目录下创建一个列表页模板的文件——archive.php。wordpress程序默认的文章列表页模板的名字必须是：archive 或 categoty，也就是说，可以是archive.php，也可以是category.php，我们这里用archive.php。
第二步：引入头部模板。
用sublime等编辑器打开trans主题的静态模板list.html，把你的代码复制到archive.php文件中。然后，在代码找到</header>这句代码，从<!doctype html>与</header>之间的所有代码全部删除，因为这段代码，我们已经可以使用公共模板——header.php来代替了。
删除后，我们再来引入header.php这个头部模板：
< ?php get_header(); ?>
这时，我们可以正常打开列表页了。但是有一个小问题：标题显示的不是文章分类的名称，仍然是网站的名称。而我们需要的效果是，在列表页时，我们需要显示的是文章分类目录的名称。所以，我们要在header.php文件中的<title></title>标签中修改一个调用代码，
原代码是：
< title>< ?php echo get_bloginfo("name"); ?></title>
修改成如下代码：
< title>< ?php if(is_home()){echo get_bloginfo("name"); }else{if(is_category()){$cat_c=get_the_category();echo $cat_c[0]->cat_name; echo " - "; bloginfo("name");}else{the_title(); echo " - "; bloginfo("name");} } ?></title>
这段代码的意思是：如果是网站的首页，就显示网站的名称；如果是列表页，就显示为“分类目录名称 + 网站名称”；否则就显示“文章标题+网站名称”。
第三步：引入右侧边栏模板。
在archive.php中找到< div class="c_right">标签中的所有代码，删除掉，然后，在当前位置上，引入公共模板sidebar.php侧边栏模板，代码如下：
< ?php get_sidebar(); ?>
这样，我们就不需要再去修改原< div class="c_right">标签内的代码了，而只需直接把sidebar.php拿来用就可以了。
第四步：引入底部模板。
同上，在archive.php代码中找到< footer>标签，然后，把< footer>及它后面的所有代码全部删除掉，现在不需要了，因为，我们有footer.php底部公共模板了。删除掉后，我们在原位置上直接引入这个footer.php底部模板，代码如下：
< ?php get_footer(); ?>
在引入完头部、侧边栏、底部的公共模板后，我们再来看看archive.php的模板代码，如下图：
然后，我们只需要修改archive.php模板代码中的 < div class="c_left">标签内部的代码就可以了。
第五步：修改左侧主体部分。
其实，我们查看trans主题的静态代码的效果时，我们可以看到，列表页与首页基本上是一样的，只是左侧的顶部多了一个面包屑导航。所以，我们只需要修改< div class="c_left">标签里的代码就可以了（如上图所示）。我们可以先把archive.php代码中的< div class="c_left">里的代码全部删除掉，然后把首页模板index.php代码中的< div class="c_left">所有代码全部复制下来，粘贴到archive.php中。这段代码包括了左侧的文章列表以及分页按钮。这样，archive.php的左侧主体部分基本弄好。
第六步：添加面包屑导航。
我们在archive.php模板的< div class="c_left"> 标签中的< div class="left_bottom">标签的上方，添加发下代码：
< div class="left_top">< ul>< li><span class="dashicons-before dashicons-admin-generic"></span><?php echo $cat_c[0]->cat_name; //获取当前分类名 ?></li>< li>< a href="< ?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首页</a> > < ?php the_category(","); ?></li></ul>< ul>< ?php $cat_desc=$cat_c[0]->category_description; //获取当前分类的描述。if($cat_desc){echo $cat_desc; }else{echo $cat_c[0]->cat_name; //获取当前分类名}?></ul></div>
这段代码中，我们又用到了几个wordpress的函数：
the_category(",")：获取当前分类导航；$cat_c=get_the_category()：获取当前分类的信息，并赋值给$cat_c这个变量
面包屑导航的主要作用，就是让用户可以看到当前页面所在的个体位置。而且，可以通过点击面包屑导航中的相关链接，可以跳转到链接页面，如：返回首页（如下图）。
?通过上面的几步，我们就完成了wordpress主题trans的文章列表页动态模板的修改。嗯，是不是有一个小小的发现：修改trans主题的列表页模板要比修改首页模板index.php所花的时间要少得多。是的，因为在修改index.php首页模板时，我们需要所有的代码，而修改archive.php模板时，我们只需要把公共模板拿来直接用就可以了，省去了大量的时间，这就是公共模板的魅力之所在。好了，本节就介绍到这里，如有疑问，欢迎点评。
ordPress圈内比较有名的培训机构，米课算得上是一家了。
曾经在米课的群里听过几次直播。令我印象最深的，便是那些口头语中带的脏话！
他们推荐的编辑器是有名的Elementor。这确实是一款比较流行的编辑器。可视化的界面、随意拖动的组件、丰富的插件支持。为什么我说它是“流行的”，而不是“最好的”呢？它并不是速度最快的，逻辑比较复杂，制作过程相当占用电脑资源。操作对新手并不友好。
这几年一直在布局自己家的外贸站（大约80个），前前后后用过10几款Themforest最流行的WordPress主题，做了汉化，也做过深度的优化，仔细评测了加载速度、优化得分、界面美观度、新手上手难度等。
如果你是入门到中级水平，请直接看下面的结论吧，希望大家少走弯路，节约时间多赚钱。
1、目前销量排名第一的Avada，功能强大，有自己的编辑器，但是各项设置太琐碎。界面设计水平差点意思，用它的内置组件，恐怕美观度上大打折扣。
我的AVADA案例：www.chinapowdermill.com
2、推荐我用得最多的两款主题：Uncode、Impreza。这两款主题也是Themeforest里评分最高的（两款都是销量大的主题里最高分，4.89分 ）
Uncode主题设计师一定是学院派。界面相当美观，像素级的设计。自带模板库非常实用。这是我用过的能用最短时间搭建漂亮网站的主题。最近的更新进一步优化了性能，只加载页面中用到的js和css，Google评分大幅提高。
我的Uncode案例：www.alpapowder.com
Impreza主题的设计也很优秀。它最大的一个优势是，对js和css进行了单独优化，加载量只有几十k，这是我用过的所有主题中，js和css加载量最少的。带来的直接影响是Google评分能达到99，加载速度领先别的主题。
我的Impreza案例：www.tecpacksolutions.com
借用摄影圈的一句话，相机后面的那颗头比镜头更重要。WordPress以及它的主题、插件只是实现你想法的工具，你的思维是无价的。每个WP主题的开发思路，决定了他提供的功能，并不能满足每个人的独特需求。祝愿大家找到更适合自己的，外贸生意更上一层楼。
#外贸出口##制造业强国##wordprees##独立站#
若有收获，就点个赞吧
迎来到《真香，30天做一套wordpress主题》系列文章，我们的目标是（没有蛀牙！）建立一套全新的wordpress主题，花上30天的时间闭关修炼，如果你看到的第一篇文章不是《基础框架搭建》，建议你关注我们（数字江湖异志录），从该系列的第一篇开始阅读。
我们将尽量保持文章的循序渐进和通俗易懂，请确保自己已经掌握了那一篇文章的全部内容时才选择跳过，不然可能会错过关键的信息噢~
这里我们假定你已经知晓了以下基础知识，这些基础知识对理解文章内容是至关重要的：
1. HTML/CSS/JS基础
2. PHP基础
3. 如何使用Wordpress
4. 如何搭建web环境
如果你已经知晓了以上基础知识，恭喜你，本系列的任何文章内容对你而言都没有什么难度。
新版的wordpress增加了自定义主题设置的功能，并且官方也推荐开发者把相关的设置放到主题自定义里。默认的情况下，主题会自动开启一些自定义参数（即使我们的主题还没有使用它们）：
我们在主题文件夹下建立一个functions.php文件，这个文件会影响到主题的方方面面，首先我们建立自定义的主题参数连接：
// Customizer
function my_customize_register($wp_customize) {
};
add_action( 'customize_register', 'my_customize_register' );相关的主题设定我们都会写到my_customize_register里，我们先来了解三个基本概念：
1. Section
2. Settings
3. Control
为了方便理解，我们可以把section当成设置的一级菜单，control是菜单里的设置控件，settings则是存储设置的容器。
通过查阅wordpress文档，我们找出了那些默认开启的section的唯一id，然后我们在代码里把它们去除：
// Customizer
function my_customize_register($wp_customize) {
// remove default section
$wp_customize->remove_section('title_tagline');
$wp_customize->remove_section('custom_css');
$wp_customize->remove_section('static_front_page');
};然后我们添加自己的section、control、settings，这里我们先盘点一下目前的需求，我们需要对页面的公共顶部进行设置，公共顶部含有以下元素：
1. 博客标题
2. 主标语（slogan/tagline）
3. 副标语
那么我们在functions.php里实现代码是像这样的：
$wp_customize->add_section( 'header_setting' , array(
'title'=> __( 'Header Setting'),
'priority'=> 10,
) );
$wp_customize->add_setting( 'blog_title' , array(
'default'=> get_bloginfo('name'),
'transport'=> 'refresh',
) );
$wp_customize->add_setting( 'main_tagline' , array(
'default'=> 'Free the Internet',
'transport'=> 'refresh',
) );
$wp_customize->add_setting( 'sub_tagline' , array(
'default'=> 'Across the Great Wall we can reach every corner in the world',
'transport'=> 'refresh',
) );
$wp_customize->add_control(
'input_blog_title',
array(
'label'=> __( 'Blog Title'),
'section'=> 'header_setting',
'settings'=> 'blog_title',
'type'=> 'text',
)
);
$wp_customize->add_control(
'input_main_tagline',
array(
'label'=> __( 'Main tagline'),
'section'=> 'header_setting',
'settings'=> 'main_tagline',
'type'=> 'text',
)
);
$wp_customize->add_control(
'input_sub_tagline',
array(
'label'=> __( 'Sub tagline'),
'section'=> 'header_setting',
'settings'=> 'sub_tagline',
'type'=> 'textarea',
)
);这里我们用到了三个方法：
1. add_section
2. add_settings
3. add_control
对应section、settings、control的添加，需要注意的是，我们在设置文本的title输出那里用到了魔术方法__()，这是为后期主题的国际化做准备，魔术方法__()和魔术方法_e()都是为了主题多语言而存在的，它们之间的不同就是__()返回字符串，而_e()直接把文本在页面里输出，当然，它们都是根据当前系统设定的语言找到对应的语言包输出的，主题国际化的相关内容我们在本系列的后期进行展开。
这样设定之后，我们就可以在主题的任意位置调用这些设置好的内容，现在我们把它们在home.php里显示出来看看。
<body>
<header>
<?php echo get_theme_mod('blog_title') ?>
<?php echo get_theme_mod('main_tagline', 'Free the Internet') ?>
<?php echo get_theme_mod('sub_tagline', 'Across the Great Wall we can reach every corner in the world') ?>
Header Area
</header>
</body>这里我们用到的内置方法是get_theme_mod，我们传两个参数给它，一个是主题设置的settings id，一个是默认值。
还记得我们在第1天建立框架时有添加的style amp-custom吗，我们在里面添加一段css，让我们的header凸显出来：
<style amp-custom>
header {
width: 100vw;
height: 18.5185vw;
background: gray;
}
</style>刷新页面，我们应该能看到这样的页面输出：
这里，Hhacker's blog是我的blog名称，其它的就是刚才我们设定的主标语和副标语的默认值了。
我们在主题自定义那里设定这些settings并点击发布时，页面里对应的部分就会发生变化了。
接下来我们顺便把主题的favicon参数也实现了吧，favicon是显示在浏览器标签页上的小图标，我们按照之前的方法，建立一套settings和control，并绑定到我们的section里：
$wp_customize->add_setting( 'favicon' , array( 'default'=> '', 'transport'=> 'refresh', 'sanitize_callback'=> 'absint', ) ); $wp_customize->add_control( new WP_Customize_Site_Icon_Control( $wp_customize, 'set_favicon', array( 'label'=> __( 'Favicon' ), 'description'=> __( 'Favicon is what you see in <strong>browser tabs</strong>, bookmark bars'), 'section'=> 'header_setting', 'settings'=> 'favicon', 'width'=> 32, 'height'=> 32, ) ) );
这里我们直接使用了wordpress的内置控件WP_Customize_Site_Icon_Control,这个控件可以直接对图片进行上传和裁剪。
然后我们在header.php公共头里使用使用这个favicon：
<?php
if ($icon=wp_get_attachment_url(get_theme_mod('favicon'))) {
echo '<link rel="shortcut icon" href="'.$icon.'">';
}
?>这里需要注意的是我们直接get_theme_mod取到的内容是一个数字id，我们需要使用wp_get_attachment_url获取图片id对应的url路径。
这样我们刷新页面 ，就能在标签页上看到我们设置好的的favicon了。
今天我们定义了一套主题的设置选项，之后我们会把所有跟主题相关的设置统统放到里面，wordpress的主题自定义设置设计得非常优雅，相对于以往的建立专门的主题设置页面而言，在自定义设置里添加相应的控制选项非常简单和直接，让我们可以对主题设定进行统一管理。
明天（第3天）我们将真正将这一套公共顶部搭建起来，并且实现页面在PC、平板、手机上的响应式布局。
如果你喜欢这个系列的文章，赶快关注我们吧，不要错过后续的更多干货噢。
*请认真填写需求信息，我们会在24小时内与您取得联系。
