[WordPress技术] wordpress主题模板开发制作教程

[复制链接]
查看: 740|回复: 20

7

主题

7

帖子

33

积分

新手上路

Rank: 1

积分
33
发表于 2022-8-16 14:29:06 | 显示全部楼层 |阅读模式
本节wordpress主题模板开发制作教程共由:wordpress的文件认知、主题模板文件认知、公共头部、底部、菜单导航、侧边栏、自定义模板、自定义字段的添加与调用等等21个章节组成。
  虽然wordpress已经为我们提供了很多的免费模板主题,但是这些免费的主题有时候质量并不是很高,不能满足我们的网站需求,高质量的模板主题又要收费,那倒不如自己动手开发制作一套wordpress模板主题,下面一起来学习如何开发制作wordpress模板主题吧!

wordpress主题模板开发制作教程-目录









腾讯云

11

主题

12

帖子

43

积分

新手上路

Rank: 1

积分
43
发表于 2022-8-16 14:32:30 | 显示全部楼层
wordpress文件认知讲解
WordPress是世界上使用量比很高的免费开源cms内容管理系统,可以用它来制作,博客,企业官网,电子商务,甚至是商城网站,它是利用使用比较广泛的PHP语言开发,wordpress还拥有丰富的插件和免费的wordpress主题供我们使用,但是有时候网上的主题并不能满足我们使用,哪我们该怎么定制开发一套属于自己的模板主题呢,下面就为大家献上一套wordpress模板主题开发仿站教程供大家使用学习。


1、wordpress文件认知讲解
wordpress的下载安装我就不做过多的讲解了,比较简单,下面我们来看一看wordpress文件目录都代表这什么

wordpress根目录

wp-admin                                                          后台文件

wp-content                                                        前台文件

                 languages                                        多语言包文件

                 plugins                                             插件根目录(wordpress安装的插件都在该目录下)

                 themes                                            主题安装目录(wordpress安装的主题都在该目录下)

                 upgrade

                 uploads                                             文件上传目录(用来存放上传的图片)

wp-includes                                                       类库文件(wordpress核心文件)

index.php                                                          核心文件
wp-activate.php
wp-blog-header.php
wp-comments-post.php                                     接收评论,提交数据库的文件
wp-config.php                                                    数据库配置文件
wp-config-sample.php
wp-cron.php                                                       定时执行文件
wp-links-opml.php                                              生成opml格式的链接列表(通过菜单添加)
wp-load.php                                                        加载wp-config.php和设置的公共变量,加载类库wp程序和
wp-login.php                                                       后台登陆界面
wp-mail.php                                                        邮件操作
wp-settings.php
wp-signup.php
wp-trackback.php
xmlrpc.php                                                         远程发布


2、wordpress数据库表认知讲解
1.jpeg
文章评论信息

         wp_commentmeta    文章评论额外信息表

         wp_comments       文章评论信息表

链接信息

         wp_links           存放友情链接的信息

         版本3.5之后后台没有了管理友情链接入口  需安装插件Link manger

基本配置信息

         wp_options        基本配置信息表(作为插件存放数据的一个地方)对应后 台置

文章信息表

         wp_postmeta      文章额为数据库,文章自定义字段存储在这里

         wp_posts         文章信息表。包含了日志,附件,页面等信息

分类信息

         wp_terms            分类。标签的基础信息(没有体现关联)

         wp_term_relationships  分类与文章 链接 菜单的关联表

         wp_term_taxonomy   分类补充信息表 区分trems分类类型 有 category link tag menu四种分类类型

用户信息

         wp_users   用户基本信息表

         wp_usermeta 用户额外信息


回复

使用道具 举报

6

主题

7

帖子

24

积分

新手上路

Rank: 1

积分
24
发表于 2022-8-16 14:34:05 | 显示全部楼层
wordpress默认主题模板文件认知

wordpress默认主题模板文件认知与公共模板调用

index.php                         首页默认主题模板
category.php                    分类列表页默认主题模板
page.php                         单页默认主题模板
single.php                       文章内容默认主题模板
single-{post-type}.php     文章单独指定模板
singular.php                    没有对应模板的文章的默认模板(如果每有该文件找,会自动跳到首页)
tag.php                           标签模板
author.php                      作者模板(访问该作者详情时)
404.php                          404模板
search.php                     搜索页默认模板


header.php                    头部默认公共模板
footer.php                      底部默认公共模板模板
sidebar.php                   侧边栏目默认模板
searchform.php             搜索表单默认模板(不是搜索页模板哦)


回复

使用道具 举报

0

主题

1

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2022-8-16 14:36:02 | 显示全部楼层
创建主题文件

wordpress模板主题仿站开发第一步先创建主题文件
  1、在您的网站根目录\wp-content\themes 文件下创建一个文件夹用来存放您的主题文件,该文件夹命名为英文不能包含中文。
  2、在新建的主题文件夹下创建style.css 在该文件下填写您的主题信息以及主题样式
  1. /*
  2. Theme Name:您的主题名字
  3. Theme URI:http://www.主题网址.com/
  4. Description:主题描述。。。。
  5. version:版本1.0.1
  6. Author:作者名
  7. Author URL:http://www.作者链接.com/
  8. Tags:标签名,标签名2
  9. */
  10. body{background:#f5f5f5;}
  11. .index-left{background:#fff; width:600px;float:left;margin:15px;    box-shadow: 0 4px 8px 0 rgb(255 254 254 / 20%), 0 6px 20px 0 rgb(206 206 206 / 19%);
  12. }
  13. .index-right,.index-right2{background:#fff; width:300px;float:left;;margin:15px;    box-shadow: 0 4px 8px 0 rgb(255 254 254 / 20%), 0 6px 20px 0 rgb(206 206 206 / 19%);
  14. }
  15. .link{width:800px;background:#fff;;margin:15px;    box-shadow: 0 4px 8px 0 rgb(255 254 254 / 20%), 0 6px 20px 0 rgb(206 206 206 / 19%);
  16. }
复制代码
3、在该文件下上传一个名screenshot.png的图片文件,用来做为新建wordpress主题的封面图片
4、在该文件夹下创建css images  js 文件用来存放主题文件 和一个index.php文件做为您的主题首页即可开始您的wordpress模板主题仿站开发之路

回复

使用道具 举报

26

主题

27

帖子

92

积分

注册会员

Rank: 2

积分
92
发表于 2022-8-16 14:37:10 | 显示全部楼层
WordPress公共头部_底部_菜单导航_侧边栏_自定义模板文件调用

在wordpress网站模板主题开发中,常常会遇到这样一个问题:wordpress网站主题模板的头部、侧边栏、底部的内容都一样,(列入导航),这时,我们如果还要在每一个页面的头部、侧边栏、底部重复添加或修改相同的,就会增加很多工作量,有没有更好的方法来提高代码的重用性呢。答案当然是有的,我们可以把这些内容代码相同的部分,放到一个公共的模板中,其它页面可以直接引用就可以了。


公共模板调用标签
<?php get_header()?>     头部调用
<?php get_footer()?>      底部调用
<?php get_sidebar()?>    侧边栏调用
<?php get_searchform()?> 搜索form表调用
<?php get_template_part( 'link' );?>  自定义公共主题文件调用(link为自定义主题文件名)

回复

使用道具 举报

27

主题

28

帖子

95

积分

注册会员

Rank: 2

积分
95
发表于 2022-8-16 14:38:51 | 显示全部楼层
wordpress基本设置与系统参数调用

在wordpress模板主题仿站开发教程第四章节正式开始wordpress定制开发之路,开发一个属于我们自己的模板主题该章节主要讲解网站的一些基本参数的调用方法。

在做主题开发之前,在我们的wordpress后台外观主题中启用我们新创建的主题文件。然后在该主题下新建 functions.php 文件注册开启侧边栏与友情链接

一、wordpress首页模板主题仿站开发公共参数调用
1、wordpress系统参数调用标签
  1. <? bloginfo('charset'); ?>                     调用网站编码
  2. <? bloginfo('url'); ?>                         调用网站域名
  3. <? bloginfo('name'); ?>                                               调用网站名称
  4. <? bloginfo('description'); ?>                 调用网站描述
  5. <? bloginfo('stylesheet_url'); ?>              调用主题style.css
  6. <? php bloginfo('template_url'); ?>            绝对路径地址
  7. <? php echo get_option('home'); ?>             调用options表中home字段(potions表是用来存放系统产数的数据变)
  8. <? php get_header(); ?>                        wordpress钩子调用公共头部
  9. <? php get_footer(); ?>                        wordpress钩子调用公共底部
  10. <? php get_sidebar(); ?>                       wordpress钩子调用侧边栏
  11. <? php get_template_part( 'link' ); ?>         wordpress钩子调用自定义link.php
  12. <? php get_template_part( 'link', 'head' ); ?> wordpress钩子调用自定义link.php不存在调用head.php
  13. <?php   /*Template Name: about*/  ?>           自定义模板调用, 在自定义模板头部添加
  14. <?php wp_list_bookmarks( $args );?>                    友情链接调用
复制代码
2、wordpress系统参数调用案例-文件 index.php
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="<? bloginfo('charset'); ?>  ">
  5.   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
  6.   <title><? bloginfo('name'); ?></title>
  7.   <meta name="Description" content="<? bloginfo('description'); ?> ">
  8.   <link rel="stylesheet" id="wp-block-library-css" href="<?php bloginfo('template_url'); ?>/style/css/dist/block-library/style.min.css" type="text/css"/>
  9.   <link rel="stylesheet" id="bootstrap-css" href="<?php bloginfo('template_url'); ?>/style/css/bootstrap.min.css" type="text/css" />
  10.   <link rel="stylesheet" id="iconfont-css" href="<?php bloginfo('template_url'); ?>/style/css/iconfont.css" type="text/css"/>
  11.   <link rel="stylesheet" id="style-css" href="<?php bloginfo('template_url'); ?>/style/css/style.css" type="text/css"  />
  12. </head>
  13. <body>
  14. <div class="site-wrapper">
  15. <!--  公共头部文件调用 -->
  16. <?php get_header(); ?>
  17. <!--  公共头部文件调用end -->

  18. <!--  公共底部文件调用 -->
  19. <?php get_hooter(); ?>
  20. <!--  公共底部文件调用 -->

  21. <!--友情链接-->
  22. <?php wp_list_bookmarks( $args );?>  
  23. </div>
  24. </body>
  25. </html>
复制代码

回复

使用道具 举报

16

主题

17

帖子

66

积分

注册会员

Rank: 2

积分
66
发表于 2022-8-16 14:46:43 | 显示全部楼层
wordpress菜单导航调用

wordpress模板主题仿站开发菜单导航调用之前,先在网站后台添加分类栏目,与单页栏目,如图所示(分类栏目就是指网站的列表页:如产品中心,新闻中心,新建页面:指的是网站的单页,比如联系我们,关于我们呢)

然后在后台外观》菜单中创建新菜单命名为 nav然后把你想要放到导航菜单栏的分类或者是单页,勾选上后点击添加至菜单就可以啦,最后就是在网站前台调用我们的菜单了
12.png

1、wordpress菜单导航前台调用方法分为以下三种

方法一:直接调用wordpress默认的导航菜单样式  
  1. <? wp_nav_menu() ?> 方法一(默认菜单调用方法)
复制代码
方法二: 同样是调用默认菜单导航,但是更改数组后面参数可以更改默认样式的值
  1. <?php                                          方法二(默认菜单调用方法,可更改样式)
  2.   wp_nav_menu( array(
  3.     'theme_location'  => '',                   //导航别名
  4.     'menu'   => '',                            //期望显示的菜单
  5.     'container'  => 'div',                     //容器标签
  6.     'container_class' => '',                   //ul父节点class值
  7.     'container_id'  => '',                     //ul父节点id值
  8.     'menu_class'   => 'menu',                  //ul节点class值
  9.     'menu_id'   => '',                         //ul节点id值
  10.     'echo'  => true,                           //是否输出菜单,默认为真
  11.     'fallback_cb' => 'wp_page_menu',           //菜单不存在时,返回默认菜单,设为false则不返回
  12.     'before' => '',                            //链接前文本
  13.     'after'  => '',                            //链接后文本
  14.     'link_before'  => '',                      //链接文本前
  15.     'link_after'  => '',                       //链接文本后
  16.     'items_wrap'  => '<ul id="%1$s" class="%2$s">%3$s</ul>',   //如何包装列表
  17.     'depth' => 0,                             //菜单深度,默认0
  18.     'walker' => ''                            //自定义walker
  19.   ) );

  20. ?>
复制代码
方法三、顶级分类和单页组成菜单导航
  1. <li<?php if (is_home()) { echo ' class="current-cat"';} ?>><a title="Home" href="/">主页</a></li>
  2. <?php
  3. $currentcategory = '';

  4. // 以下这行代码用于在导航栏添加分类列表,

  5. if  (is_category() || is_single()) {
  6.         $catsy = get_the_category();
  7.         $myCat = $catsy[0]->cat_ID;
  8.         $currentcategory = '¤t_category='.$myCat;
  9. }
  10. wp_list_categories('depth=1&title_li=&show_count=0&hide_empty=0&child_of=0'.$currentcategory);

  11. // 以下这行代码用于在导航栏添加页面列表
  12. wp_list_pages('depth=1&title_li=&sort_column=menu_order');

  13. ?>
复制代码
方法四、分类与页面组合菜单导航
使用get_terms()来获取分类列表,使用get_pages()来获取页面列表
  1. 也可以用此方法调用指定分类栏目parent=0即为父分类的id没有父分类即为0
  2. 更多参数  https://developer.wordpress.org/reference/classes/wp_term_query/__construct/
  3. <?php
  4.         // 获取分类 orderby=id按id排序parent=0调用顶级栏目 number=2循环个数
  5.         $terms = get_terms('category', 'orderby=id&hide_empty=0&parent=0&number=2' );
  6.         // 获取到的分类数量
  7.         $count = count($terms);
  8.         if($count > 0){
  9.         // 循环输出所有分类信息
  10.                 foreach ($terms as $term) {
  11.                         echo '<li><a href="'.get_term_link($term, $term->slug).'" title="'.$term->name.'">'.$term->name.'</a></li>';
  12.                 }
  13.         }
  14. ?>       
  15. //parent=0 调用顶级栏目 number=2循环个数
  16. <?php
  17. $mypages = get_pages('parent=0&number=2');

  18. if(count($mypages) > 0) {
  19.     foreach($mypages as $page) {
  20.         echo '<li><a href="'.get_page_link($page->ID).'" title="'.$page->post_title.'">'.$page->post_title.'</a></li>';
  21.     }
  22. }
  23. else {
  24.     echo '<li><a href="#">没有页面</a></li>';
  25. }
  26. ?>       
复制代码
get_terms函数的数组

[term_id] => 2                           分类id
[name] => 产品中心                 分类名称
[slug] => product                     
[term_group] => 0
[term_taxonomy_id] => 2
[taxonomy] => category
[description] => 分类描述
[parent] => 0                            分类父元素id
[count] => 2
[filter] => raw

get_pages()函数的数组

[post_author] => 1
[post_date] => 2021-06-29 09:57:35
[post_date_gmt] => 2021-06-29 01:57:35
[post_content] =>
[post_title] => 联系我们
[post_excerpt] =>
[post_status] => publish
[comment_status] => closed
[ping_status] => closed
[post_password] =>
[post_name] => contact
[to_ping] =>
[pinged] =>
[post_modified] => 2021-06-29 09:57:35
[post_modified_gmt] => 2021-06-29 01:57:35
[post_content_filtered] =>
[post_parent] => 0
[guid] => http://word03.com/?page_id=13
[menu_order] => 0
[post_type] => page
[post_mime_type] =>
[comment_count] => 0
[filter] => raw

使用get_terms可以获取你的文章分类、链接分类和自定义分类等,给get_terms()传递相应的参数可以给你返回一个对象数组,这个数组就是你想要的所有分类,以下是get_terms()的函数原型:

<?php get_terms( $taxonomies, $args ) ?>

$taxonomies:
     该参数是你想要获取的分类类别,可选值包括:"category","link_category","my_taxonomy",他们分别代表文章分类、链接分类以及你自定义的分类,其中my_taxonomy是你自定义的分类名称。

$args:
     该参数是分类的筛选参数,用于控制获取你要获取的分类,包括你想要获取多少个分类、如何排序、父分类以及是否输出空的分类等,具体请参考WordPress官方文档

$taxonomies:
     该参数是你想要获取的分类类别,可选值包括:"category","link_category","my_taxonomy",他们分别代表文章分类、链接分类以及你自定义的分类,其中my_taxonomy是你自定义的分类名称。

get_terms()函数返回一个对象数组$terms,我们首先判断这个数组是否为空,为空说明并没有获取到任何分类,如果不为空那么你就可以输出分类了。$terms的每个数组项就是一个对象,部分对象属性的意义如:slug:分类缩略名,name:分类名,term_id:分类id。如以上代码所示,你可以通过$term->name来获取对象的属性值。

WordPress的页面page可以通过wp_list_pages()来列出,不过这个函数输出的HTML都是固定的,如果你想要自定义这些HTML,可以使用get_pages()来获取页面列表
回复

使用道具 举报

11

主题

12

帖子

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-8-16 14:54:03 | 显示全部楼层
WordPress不同的分类_单页_文章页指定自定义不同的模板

用wordpress做网站时经常会需要子分类使用父分类模板,子分类文章页使用父分类文章页模板,不同分类使对应分类模板,或者多个分类共用一个模板,多个单页共用一个模板或者不同单页使用不同的模板,又或者让文章页和分类页一样,可以根据分类别名自动识别对应的文章模板。

虽然wordpress给了我们默认模板文件,但现实使用中却是远远无法满足我们的使用要求的!那么如何实现上面的提到的模板对应方法呢?具体方法如下!


1、wordpress分类栏目指定自定义模板
a、category.php             默认分类模板
b、category-别名.php
分类别名实现不同分类使用不同模板,后台分类目录名称后有一个别名 ,系统会根据分类别名自动调用对应的模板(例:category-news.php )

c、category-id.php        
分类id实现自定义模板  系统会根据分类id 自动获取与之对应的模板 。如果没有对应模板会调用默认模板 (例:category-2.php )

d、子分类页面使用父分类模板 ,在function.php中添加如下代码(例:新闻中:行业新闻,公司新闻公共一个模板)结合上面的 b方法 或者c方法 使用
  1. add_filter('category_template', 'f_category_template');
  2. function f_category_template($template){
  3.         $category = get_queried_object();
  4.         if($category->parent !='0'){
  5.                 while($category->parent !='0'){
  6.                         $category = get_category($category->parent);
  7.                 }
  8.         }
  9.        
  10.         $templates = array();

  11.         if ( $category ) {
  12.                 $templates[] = "category-{$category->slug}.php";
  13.                 $templates[] = "category-{$category->term_id}.php";
  14.         }
  15.         $templates[] = 'category.php';
  16.         return locate_template( $templates );
  17. }
复制代码
2、wordpress多个分类共用一个模板与不同分类使用不同模板
根据分类别名或id判断实现,在默认分类文件category.php顶部添加如下代码
  1. //如果分类别名为solution就调用category-case.php模板
  2. <?php
  3. if ( is_category('solution') ) {
  4. include(TEMPLATEPATH . '/category-case.php');
  5. }
  6. ?>

  7. //如果默认模板本来就有内容会同时输出category-case.php与默认模板的内容 解决方法如下
  8. <?php
  9. if ( is_category('solution') ) {
  10. include(TEMPLATEPATH . '/category-cases.php');
  11. }else{
  12. ?>
  13. 默认模板的内容
  14. <? } ?>
复制代码
3、多个单页使用同一个模板与不同单页使用不同模板
page.php                默认单页模板
page-about.php      根据单页别名判断不同单页使用不同模板 (例:关于我们,单页别名:about)
page-id.php            根据id 联系我们模板 (联系单页别名:contact)

把我们自定义的单页模板顶部加如下代码, 之后我们可以在后台单页编辑的右侧,模板一栏选择我们的自定义单页模板了(任何单页都可以选择该模板了)

  1. <?php /* Template Name: 关于我们模板  */ ?>
复制代码
12.png
4、不同分类下的文章使用不同的文章页模板,多分类下文章使用同一文章页模板
4.1、根据分类别名判断在默认文章内容页模板single.php 添加如下代码
  1. <?php
  2. //多个分类别名共用一个模板
  3. if (in_category(array('themes','plugins','develop') ) ) {
  4.     get_template_part('single-product' );

  5. //不同分类名使用不同模板
  6. }elseif ( in_category('themes')) {
  7.     get_template_part('single-case' );

  8. //其他调用默认模板
  9. }else {
  10.     get_template_part('single-default' );
  11. }
  12. ?>

  13. 如果有子分类使用下面方法:子分类文章使用父分类文章模板
  14. <?
  15. //获取该文章父分类id
  16. $typeid=(get_the_category())[0]->category_parent;
  17. //获取该文章父分类数据
  18. $category = get_category($typeid);
  19. //该文章父分类别名
  20. $category = $category->slug;

  21. //如果分类别名,或者父分类别名是product就选择single-product.php模板
  22. if (in_category(array('product')|| $category == "product" ) ) {
  23.     get_template_part('single-product' );
  24. //如果分类别名是news就选择single-news.php模板
  25. }elseif ( in_category('news')) {
  26.     get_template_part('single-news' );
  27. }else {
  28.         //其他文章调用默认模板
  29.     get_template_part('single-default' );
  30. }

  31. ?>
复制代码
4.2、根据分类ID判断在默认文章内容页模板single.php 添加如下代码 (方法和上面一样,只是把分类别名改为了id)
  1. //根据分类id判断
  2. <?php
  3. if ( in_category(array( 2,3 )) ) {//多个分类id
  4.     get_template_part('single-product' );
  5. }elseif ( in_category( 7 )) {//单个分类id
  6.     get_template_part('single-case' );
  7. }else {//其他调用默认模板
  8.     get_template_part('single-default' );
  9. }
  10. ?>

  11. 如果有子分类使用下面方法:子分类文章使用父分类文章页模板
  12. <?php
  13. //获取父分类id
  14. $typeid=get_the_category();
  15. $typeid=$typeid[0]->category_parent;

  16. if ( in_category(array(1)) || $typeid==1 ){
  17.     get_template_part('single-product');
  18. }elseif ( in_category(3) || $typeid==3){
  19.     get_template_part('single-news' );
  20. }else {
  21.     get_template_part('single-news' );
  22. }
  23. ?>
复制代码
4.3、让文章页和分类页一样,可以根据分类别名自动识别对应的模板(分类别名为 new 内容页会自动使用 content-new.php 做为文章页模板)
  1. <?
  2. $cat=get_the_category(get_the_id());
  3. $name=$cat[0]->slug;
  4. //自动识别文章页别名 content-别名.php
  5. //如果没有对应的就调用content.php
  6. get_template_part( 'content', $name );

  7. ?>
复制代码
5、文章根据文章别名调用不同的模板
将下面的代码添加到当前主题的 functions.php 文件
  1. /**
  2. * 不同分类使用不同的文章模板
  3. *
  4. */
  5. //定义模板文件所在目录为 single 文件夹
  6. define("SINGLE_PATH", TEMPLATEPATH . '/single');
  7. //自动选择模板的函数
  8. function wpdaxue_single_template($single) {
  9.         global $wp_query, $post;
  10.         //通过分类别名或ID选择模板文件
  11.         foreach((array)get_the_category() as $cat) :
  12.                 if(file_exists(SINGLE_PATH . '/single-cat-' . $cat->slug . '.php')) {
  13.             return SINGLE_PATH . '/single-cat-' . $cat->slug . '.php';
  14.         }elseif(file_exists(SINGLE_PATH . '/single-cat-' . $cat->term_id . '.php')){
  15.             return SINGLE_PATH . '/single-cat-' . $cat->term_id . '.php';
  16.         }elseif(file_exists(SINGLE_PATH . '/single.php')){
  17.             return SINGLE_PATH . '/single.php';
  18.         }
  19.         endforeach;
  20. }
  21. //通过 single_template 钩子挂载函数
  22. add_filter('single_template', 'wpdaxue_single_template');
复制代码


回复

使用道具 举报

14

主题

15

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2022-8-16 15:02:24 | 显示全部楼层
wordpress网站首页模板主题开发制作

本篇文章为大家带来的是wordpress网站首页模板主题开发制作教程,首页是做为网站开发最重要的页面之一,也是必不可少的一个页面,首页所包含的内容相对来说也是网站所有页面里面包含内容最多的一个页面,其中包括 指定分类文章调用、调用指定分类栏目名调用、调用指定分类的栏目链接、调用指定分类子菜单,调用指定单页内容,调用指定文章内容、等等......


做为网站首页主要包括以下内容

1、公共头部导航调用

2、banner图

3、 wordpress首页调用指定栏目循环标签

     a、调用指定分类栏目名与栏目链接
  1. //数字2指的是栏目id
  2. <a href="<?php echo get_category_link(2); ?>"> <?php echo get_cat_name(2);?> </a>
复制代码
    b、wordpress调用指定分类栏目下的子分类(wordpress中的 get_categories()函数)
  1. 方法一、 get_categories()函数 更多参数可以查询该函数
  2. <?php
  3. $args=array(
  4.     'child_of' => 2, //为分类id
  5.         'hide_empty'=>false
  6. );
  7. $categories=get_categories($args);
  8.   foreach($categories as $category){
  9.         echo '<a href="'.get_category_link( $category->term_id ).'">'.$category->name.'</a>';
  10.   }
  11. ?>

  12. 方法二、默认方法 可以同时调用子分类与子分类下的文章
  13. //child_of=3        为调用指定分类的ID号,
  14. //optioncount=0     为调用分类下的文章数量
  15. //sort_column=name  分类名
  16. //hide_empty=0      是否隐藏没有文章的分类
  17. <?php wp_list_cats('sort_column=name&optioncount=0&hierarchical=1&hide_empty=0&child_of=3'); ?>
复制代码
4、wordpress网站首页调用指定单页内容
  1. 获取单页栏目id为9的内容
  2. <?php
  3.         $page_id = 9;
  4.         $page_data = get_page($page_id);
  5.         echo $page_data -> post_title;   //输出标题
  6.         echo $page_data -> post_date;    //输出发布时间
  7.         echo $page_data ->post_modified; //输出更新时间
  8.         echo $page_data ->guid;          //输出链接
  9.         echo $page_data -> post_content; //输出内容,纯文本
  10.         echo apply_filters('the_content', $page_data -> post_content);  //输出内容包含格式
  11.                                                                        
  12. ?>
复制代码

5、输出指定文章的内容 (和单页类似)
  1. //169为指定文章的id
  2. <?php
  3. $id=169;  
  4. echo  get_post($id)->post_title;  //输出文章标题
  5. echo  get_post($id)->post_content;  //输出文章内容
  6. ?>
复制代码
6、wordpress首页调用指定栏目列表循环标签
  1. /**其中cat=20代表分类ID,posts_per_page=4代表显示几条记录 **/
  2. <?php query_posts('cat=20&posts_per_page=4'); while(have_posts()): the_post(); ?>   
  3.    <li>
  4.    <a href="<?php the_permalink(); ?>" target="_blank">  //链接
  5.    <img src=" <?php $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); echo $url; ?>" title="<?php the_title();?>" /> //特色图片缩略图
  6.    <h2><?php the_title();?></h2>   //文章标题一
  7.    <h2><?php echo mb_strimwidth(get_the_title(), 0, 16, ''); ?></h2>   //可控字数:文章标题二
  8.    <p><?php the_excerpt(); ?></p>  //文章简介方法一
  9.    <p><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 200,"……"); ?></p> //可控字数:文章简介方法二
  10.    <p><?php the_date_xml()?></p>        //文章发布时间 方法一
  11.    <p><?php the_time('F d, Y') ?></p>   //文章发布时间 方法二
  12.    <p><?php the_time('y-m-d H:i:s') ?></p>      //文章发布时间 方法三
  13.   </a>
  14.    </li>   
  15. <?php endwhile; wp_reset_query(); ?>
复制代码
7、友情链接(使用友情链接需要通过functions.php开启 ,开启方法参考:wordpress模板主题仿站functions.php常用功能与常用插件
  1. 方法一、<?php wp_list_bookmarks( $args );?>
  2. 方法二、
  3. <?php
  4. $args=array(
  5. 'orderby' => 'name',                 //根据名称排序
  6. 'order' => 'ASC',                    //升序或降序
  7. 'limit' => -1,                       //设置输出链接的最大条数 -1为输出全部
  8. 'category' => '',                    //字符串,链接分类id 有显示分类下链接 没有显示全部链接
  9. 'category_name' => '',               //字符串,链接分类名 有在链接前显示该分类名,没有显示所有链接分类名
  10. 'hide_invisible' => 1,               
  11. 'show_updated' => 0,
  12. 'echo' => 1,
  13. 'categorize' =>0,                   //布尔型,设置是否按各自分类显示 1 按照分类显示 0显示全部链接
  14. 'title_li' => 0,                     //为0链接列表不会被 <ul>, </ul>标签包围
  15. 'title_before' => '',                //字符串,分类标题前文字或代码
  16. 'title_after' => '',                 //字符串,分类标题后文字或代码
  17. 'category_orderby' => 'name',         //字符串,根据分类名称排序
  18. 'category_order' => 'ASC',            //字符串,分类链接的升降序排列
  19. 'class' => 'linkcat',                 //字符串,链接的class属性
  20. 'category_before' => '',              //字符串,分类链接前的文字或代码
  21. 'category_after' => '',               //字符串,分类链接后的文字或代码
  22. 'before'    => '<li>',                //(字符串)放在链接前的文本
  23. 'after'     => '</li>',               //(字符串)放在链接后的文本

  24. );
  25. wp_list_bookmarks( $args );           
  26. ?>
  27. 或者
  28. <?php $args = array(  
  29.     'orderby' => 'name',  
  30.     'order' => 'ASC',  
  31.     'limit' => -1,  
  32.     'category' => ,  
  33.     'exclude_category' => ,  
  34.     'category_name' => ,  
  35.     'hide_invisible' => 1,  
  36.     'show_updated' => 0,  
  37.     'echo' => 1,  
  38.     'categorize' => 1,  
  39.     'title_li' => __('Bookmarks'),  
  40.     'title_before' => '<h2>',  
  41.     'title_after' => '</h2>',  
  42.     'category_orderby' => 'name',  
  43.     'category_order' => 'ASC',  
  44.     'class' => 'linkcat',  
  45.     'category_before' => '<li id=/"%id/" class=/"%class/">',  
  46.     'category_after' => '</li>' ); ?>

  47. 方法三、<?php get_links_list(); ?>  //已弃用
复制代码



回复

使用道具 举报

12

主题

13

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2022-8-16 15:09:40 | 显示全部楼层
wordpress网站分类列表页模板主题开发制作教程

网站分类列表页模板主题又称为聚合页,多位产品,或者文章列表页面也是网站中不可或缺的一种页面;本篇模板主题开发教程主要讲的是,列表循环,分页标签,面包屑导航等等......

一般正常的网站列表页主题主要有以下几部分组成

1、公共头部菜单导航

2、wordpress网站面包屑导航

3、wordpress网站侧边栏

4、当前列表分类的栏目名_栏目id_栏目链接

  1. <?php echo category_description( $category_id ); ?>  //当前分类描述
  2. <?php echo category_description(); ?>                //当前分类描述
  3. <?echo trim(strip_tags(category_description())); ?>  //当前分类描述 不带默认p标签
  4. <?
  5.         $category_title= single_cat_title('', false );
  6.         $category_id = get_cat_ID($category_title);
  7.         $category_link = get_category_link( $category_id );
  8.         echo $category_title; //输出当前分类名
  9.         echo $category_id;    //输出当前分类id
  10.         echo $category_link   //输出当前分类链接
  11. ?>
复制代码
5、当前分类顶级分类栏目的分类名_链接(例:当前行业新闻,获取父分类新闻中心栏目名)
  1. <a href="<?php echo get_category_link(get_category_root_id($cat)); ?>"><?php echo get_cat_name(get_category_root_id($cat)); ?></a>
复制代码
6、当前列表栏目子分类 (functions添加获取当前分类子分类列表代码
  1. 在需要调用当前顶级分类栏目的子分类处添加如下代码
  2. <?php
  3. if(is_single()||is_category()) { //如果是文件页面或分类页
  4. if(get_category_children(get_category_root_id(the_category_ID(false)))!= "" ) {//如果有子分类
  5.         echo '<ul class="sidebar-list1">';
  6.         echo wp_list_categories("child_of=".get_category_root_id(the_category_ID(false)). "&depth=0&hide_empty=0&title_li=&orderby=id&order=ASC");
  7.         echo '</ul>';
  8.   }else{
  9.             //如果没有获取顶级分类
  10.            }
  11. }
  12. ?>
复制代码
7、列表循环、wordpress列表页循环调用标签
  1. <?php if (have_posts()) : ?>
  2.    <?php while (have_posts()) : the_post(); ?>
  3.      <li class=" homebk1-item">
  4.       <a href="<?php the_permalink(); ?>">    //链接
  5.        <div class="homebk1-img">
  6.         <img src="<?php $full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full'); echo $full_image_url[0]; ?>" />  //缩略图(特色图片)
  7.        </div>
  8.         <h3><?php the_title();?></h3>  //标题方法一
  9.         <h3><?php  wp_trim_words( get_the_title(), 10 );?></h3> //标题方法二 可限制字数
  10.         <p><? the_excerpt(); ?></p>   //简介方法一
  11.         <p><?php  wp_trim_words( get_the_excerpt(), 20 );?></p> //简介方法二 可限制字数
  12.       </a>
  13.            <p><?php the_date_xml()?> </p>
  14.      </li>
  15.   <?php endwhile;?>
  16. <?php endif; ?>
复制代码
8、分页列表标签 (方法三:functions添加分页代码
  1. <? posts_nav_link(); ?>  // 方法一  官方默认调用方法
  2. <?php if(function_exists('wp_page_numbers')) : wp_page_numbers(); endif; ?> //方法二 需用插件 wp-page-numbers
  3. <?php kriesi_pagination($query_string); ?>  //方法三:自定义分页代码,可以根据需要更改分页代码-需在functions添加分页代码
复制代码
wordpress的默认分页标签使用起来比较方便,但是如果想做一些样式上的定制,或者做一些修改就比较麻烦了,如果需要定制分页建议使用第方法三

9、分类栏目自定义字段调用
  1. //$cat 默认为当前分类id   seo-title自定义字段
  2. <?
  3. $post_id = "category_".$cat;
  4. $value = get_field( 'seo-title', $post_id );
  5. echo $value;
  6. ?>

  7. //输出图片字段
  8. <? $post_id = "category_".$cat; echo get_field('img_ioc',$post_id);?>

  9. 案例
  10. <? $post_id = "category_".$cat; ?>
  11. <title><?php  echo get_field( 'seo-title', $post_id ); ?></title>
  12. <meta name="keywords" content="<?php  echo get_field( 'seo-keywords', $post_id ); ?>"/>
  13. <meta name="description" content="<?php  echo get_field( 'seo-description', $post_id ); ?>"/>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

精彩图文



在线客服(工作时间:9:00-22:00)
400-600-6565

内容导航

微信客服

Copyright   ©2015-2019  云服务器社区  Powered by©Discuz!  技术支持:尊托网络     ( 湘ICP备15009499号-1 )