4小时学会WordPress模板制作(一)

WordPress模板制作其实非常简单,今天蜗牛博客就带你从零开始制作一个Wordpress模板,只需要花半天的时间,你也可以制作一个你心中理想的Wordpress模板。

比如,想做一下下面这样的模板。

4小时学会WordPress模板制作(一)

一、素材
1.下载模板
我们直接以仿站开始吧,首先找到一个你喜欢的网站,比如:http://demo.codethemes.co/robolist-pro/,

然后用仿站工具,将这个网站的模板下载下来。一般我们只需要首页、列表页、详情页三个页面就可以了。

4小时学会WordPress模板制作(一)

其中的:
index.html wordrpess首页
archive.html wordpress的列表页
single.html wordpressrr的文章详情页。

下载后保存到电脑是这样的:

4小时学会WordPress模板制作(一)

2.整理模板
用notepad或者sublime之类的软件打开模板文件看一下它的代码,如果比较整齐则不用这一步。

如果下载的模板排板上有点乱,需要用html格式化工具进行一些整理,比较好用的有:
http://web.chacuo.net/formathtml/(暂时觉得这个最好用)
https://www.sojson.com/jshtml.html

二、后台显示模板

1.建立模板文件夹

在wordpress后台的theme下面建立一个文件夹Stheme,用来存放你的模板,并将你下载的模板放到这个文件夹下面。

2. index.php
将index.html改成php文件index.php。

3.style.css
因为我们在第一步下载别人网站的模板的时候,设定了将所有的css文件放到了css文件夹下面,所以style.css也当然存到了css文件夹下面。不过在wordpress的模板中,style.css必须保存在模板的根目录下面,所以我们这里需要将style.css从css文件夹下面移到模板的根目录Stheme下面,即和index.php同一个目录下面。

修改style.css文件,将以下代码放到style.css文件中

1 /*
2 Theme Name: Stheme
3 Author: 蜗牛博客
5 Description: 图片展示主题
6 Version: 1.0
7 */

4小时学会WordPress模板制作(一)

4.查看效果
这时登陆后台,可以看到我们的模板已经在后台显示了。不过没有缩略图。
4小时学会WordPress模板制作(一)

5.缩略图
在根目录Stheme下面放上一张图片,命名为screenshot.png(或者jpg),然后就可以看到效果了。
4小时学会WordPress模板制作(一)

6、启用模板
在wordpress后台启用我们制作的模板,不过发现CSS是乱的。

三、修改style.css

修改style.css文件中的css、js、images文件的路径,直接用替换功能即可。比如:

1 /static/js/
2 #替换成
3 <?php echo get_template_directory_uri(); ?>/static/js/

关于wordpress的函数,可以看这里:https://developer.wordpress.org/reference/since/5.1.0/

这时再看首页,就发现和目标站一模一样了。
4小时学会WordPress模板制作(一)

四、首页title

1.在模板根目录新建一个functions.php文件。
2.加入以下代码,用于首页显示站点信息等。

1 <?php
2
3 add_filter('wp_title', 'lingfeng_wp_title', 10, 2);
4 function lingfeng_wp_title($title, $sep) {
5     global $paged, $page;
6
7     //如果是feed页,返回默认标题内容
8     if ( is_feed() ) {
9         return $title;
10     }
11
12     // 标题中追加站点标题
13     $title .= get_bloginfo( 'name' );
14
15     // 网站首页追加站点副标题
16     $site_description = get_bloginfo( 'description', 'display' );
17     if ( $site_description && ( is_home() || is_front_page() ) )
18         $title = "$title $sep $site_description";
19
20     // 标题中显示第几页
21     if ( $paged >= 2 || $page >= 2 )
22         $title = "$title $sep " . sprintf( '第%s页', max( $paged, $page ) );
23
24     //去除空格,-的字符实体
25     $search = array('&#8211;', ' ');
26     $replace = array('-', '');
27     $title = str_replace($search, $replace, $title);
28
29     return $title
30 }
31
32
33 ?>

3.在title的位置添加以下代码:

1 <?php wp_title('|',true,'right'); ?>

4.效果预览
4小时学会WordPress模板制作(一)

五、站点标题、副标题
代码:

1 <?php bloginfo('name'); ?>          #标题
2 <?php bloginfo('description'); ?>   #副标题
3 <?php bloginfo('url'); ?>           #设定站点标题的链接到首页。      

效果预览:
4小时学会WordPress模板制作(一)

六、search form
在相应位置直接用以下代码:

1 <?php get_search_form(); ?>

如果模板文件下面没有searchform.php文件,则wordpress调用默认的表单。
如果有,则将searchform.php文件显示在搜索表单的位置。

修改搜索框的样式:
可以自己设计一个函数,持到get_search_form这个函数上面。

1 function my_search_form( $form ) {
2  
3     $form = '<form role="search" method="get" id="searchform" action="' . home_url( '/' ) . '" >
4     <div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
5     <input type="text" value="' . get_search_query() . '" name="s" id="s" />
6     <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
7     </div>
8     </form>';
9  
10     return $form;
11 }
12  
13 add_filter( 'get_search_form', 'my_search_form' );

经测试这种方法还没有过时,可以参考:https://ninghao.net/video/703

七、首页文章
1.删除多余的代码,只留下第一行的第一张图片。
2.主循环
代码:

1 <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
2 <!-- 在这里调用数据 -->
3 <?php endwhile; ?>
4 <?php endif; ?>

效果:
4小时学会WordPress模板制作(一)

3.显示文章标题、缩略图
缩略图代码在这里

1 <?php the_title(); ?>                                       #显示文章标题
2 <?php the_permalink(); ?>                                   #文章的网址
3 <?php echo get_content_first_image(get_the_content()); ?>   #缩略图地
4 <?php the_content(); ?>                                     #显示文章内容
5 <?php the_category('.'); ?>                                 #显示文章分类
6 <?php the_time('Y年m月d日 H:i:s'); ?>                        #显示发布时间
7 <?php comments_popup_link('0','1','%');?>                   #显示评论的条目
8 <?php the_tags('<strong>标签:</strong> ', ' , ' , ''); ?>   #显示文章标签

标签可以参考:http://www.1mayi.com/1224.html

另外,这套模板有个问题,如果某文章的标题太长,则排版会乱掉。所以需要对文章标题进行截取处理,代码如下:

1 <?php
2 $title = get_the_title();
3 $trimmed_title = wp_trim_words( $title, 20, '...' );
4 echo $trimmed_title;
5 ?>

上面的是按字数来显示,如果是英文是按单词数来显示,如果要按英文字母的长度来显示,就用下面这个:

1 <?php echo mb_strimwidth(get_the_title(), 0, 20, '...'); ?>

参考:https://stackoverflow.com/questions/24636136/how-do-i-show-when-the-wordpress-title-exceeds-length

woocommerce产品列表中标题长度的修改方法:
在function.php中加入以下代码

1 add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
2 function shorten_woo_product_title( $title, $id ) {
3     if ( ! is_singular( array( 'product' ) ) && get_post_type( $id ) === 'product' ) {
4         return substr( $title, 0, 45); // change last number to the number of characters you want
5     } else {
6         return $title;
7     }
8 }

4.显示文章内容

1 <?php
2
3 echo wp_trim_words( get_the_title(),50);// 截取50字的文章标题
4
5 echo wp_trim_words( get_the_excerpt(),100);// 截取100字的文章摘要
6
7 echo wp_trim_words( get_the_content(),500);// 截取500字的文章内容
8
9 ?>

自编代码:

1 <?php the_content(); ?>                                     #显示文章内容
2 <?php echo lingfeng_strimwidth(get_the_content(),190); ?>   #截取190个字符。

但是p元素会换行。

截取字符串的长度:

1 function lingfeng_strimwidth( $str, $len, $start = 0, $suffix = '……' ) {
2     $str = str_replace(array(' ', ' ','&nbsp;', '\r\n'), '', strip_tags( $str ));
3     if ( $len>mb_strlen( $str ) ) {
4         return mb_substr( $str, $start, $len );
5     }
6     return mb_substr($str, $start, $len) . $suffix;
7 }

5.文章浏览次数
Updated on 2021:
这个最好用WP-PostViews插件,这样可以轻松实现“浏览次数最多的10篇文章这样的功能。”

1 /**
2 * getPostViews()函数
3 * 功能:获取阅读数量
4 */
5 function getPostViews( $postID ) {
6      $count_key = 'post_views_count';
7      $count = get_post_meta( $postID, $count_key, true );
8      if( $count=='' ) {
9          delete_post_meta( $postID, $count_key );
10          add_post_meta( $postID, $count_key, '0' );
11          return "0";
12      }
13     return $count;
14  }
15
16
17 /**
18 * setPostViews()函数 
19 * 功能:设置或更新阅读数量
20 */
21  function setPostViews( $postID ) {
22      $count_key = 'post_views_count';
23      $count = get_post_meta( $postID, $count_key, true );
24      if( $count=='' ) {
25          $count = 0;
26          delete_post_meta( $postID, $count_key );
27          add_post_meta( $postID, $count_key, '0' );
28      } else {
29          $count++;
30          update_post_meta( $postID, $count_key, $count );
31      }
32  }

显示文章浏览次数。

1 <?php setPostViews(get_the_ID()); ?> #这行代码也不能少
2 <?php echo getPostViews(get_the_ID()); ?>

6.显示标签
the_tags的三个参数,前后是前后显示的字符,中间是分隔符号。

1 <?php if(has_tag()):?>
2 <?php the_tags('',',','');?>
3
4 <?php else;  ?>
5   暂无
6 <?php endif; ?>

7.文章分页
分页函数,注意:如果显示的间隔太短,可以直接用空格来填充。

1 /**
2 * 数字分页函数
3 * 因为wordpress默认仅仅提供简单分页
4 * 所以要实现数字分页,需要自定义函数
5 * @Param int $range         数字分页的宽度
6 * @Return string|empty      输出分页的HTML代码    
7 */
8 function lingfeng_pagenavi( $range = 4 ) {
9     global $paged,$wp_query;
10     if ( !$max_page ) {
11         $max_page = $wp_query->max_num_pages;
12     }
13     if( $max_page >1 ) {
14         echo "<div class='fenye'>";
15         if( !$paged ){
16             $paged = 1;
17         }
18         if( $paged != 1 ) {
19             echo "<a href='".get_pagenum_link(1) ."' class='extend' title='跳转到首页'>首页 </a>";
20         }
21         previous_posts_link('上一页 ');
22         if ( $max_page >$range ) {
23             if( $paged <$range ) {
24                 for( $i = 1; $i <= ($range +1); $i++ ) {
25                     echo "<a href='".get_pagenum_link($i) ."'";
26                 if($i==$paged) echo " class='current'";echo ">$i </a>";
27                 }
28             }elseif($paged >= ($max_page -ceil(($range/2)))){
29                 for($i = $max_page -$range;$i <= $max_page;$i++){
30                     echo "<a href='".get_pagenum_link($i) ."'";
31                     if($i==$paged)echo " class='current'";echo ">$i</a>";
32                     }
33                 }elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){
34                     for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){
35                         echo "<a href='".get_pagenum_link($i) ."'";if($i==$paged) echo " class='current'";echo ">$i</a>";
36                     }
37                 }
38             }else{
39                 for($i = 1;$i <= $max_page;$i++){
40                     echo "<a href='".get_pagenum_link($i) ."'";
41                     if($i==$paged)echo " class='current'";echo ">$i</a>";
42                 }
43             }
44         next_posts_link('下一页 ');
45         if($paged != $max_page){
46             echo "<a href='".get_pagenum_link($max_page) ."' class='extend' title='跳转到最后一页'>尾页</a>";
47         }
48         echo '<span>共['.$max_page.']页</span>';
49         echo "</div>\n"
50     }
51 }

在engif之前调用。

1 <?php endwhile; ?>
2 <?php lingfeng_pagenavi(); ?>
3 <?php endif; ?>

备注:
如果加入代码没有显示,可能你的文章数量太少了,需要在WordPress后台【常规】→【阅读】选项中,将“博客页面至多显示XX篇文章”设置为1,然后即可看到分页。

样式

1 /*------------------
2     分页部分的CSS
3 ------------------*/
4 .fenye{   
5     height: 25px;
6     line-height: 25px;
7     _background: #F9F9F9;
8     padding: 2px 5px;
9     margin: 20px 4px;
10     _border: solid 1px #ccc;
11     _text-align: center;
12 }
13  
14 .fenye a{
15     padding:4px 6px 4px 6px;
16     margin:0 2px 0 2px;
17     border:1px solid #aaa;
18     text-decoration:none;
19     color:#333;
20 }
21  
22 .fenye a.current{   
23     background:#ff6f3d;   
24     color:#fff;
25 }
26  
27 .fenye a:hover{
28     background:#ff6f3d;
29     color:#fff;
30 }

另外,还可以使用分页插件

bootstrap分页

1 function snail_paging() {
2     $p = 3;
3     if ( is_singular() ) return;
4     global $wp_query, $paged;
5     $max_page = $wp_query->max_num_pages;
6     if ( $max_page == 1 ) return;
7     echo '<ul class="pagination">';
8     if ( empty( $paged ) ) $paged = 1;
9     // echo '<span class="pages">Page: ' . $paged . ' of ' . $max_page . ' </span> ';
10     if ( $paged > 1 ) p_link( 1, '首页' );
11     echo '<li class="prev-page">'; previous_posts_link('上一页'); echo '</li>';
12     //if ( $paged > $p + 1 ) p_link( 1 );
13     //if ( $paged > $p + 2 ) echo "<li><span>···</span></li>";
14     for( $i = $paged - $p; $i <= $paged + $p; $i++ ) {
15     if ( $i > 0 && $i <= $max_page ) $i == $paged ? print "<li class=\"active\"><span>{$i}</span></li>" : p_link( $i );
16     }
17     //if ( $paged < $max_page - $p - 1 ) echo "<li><span> ... </span></li>";
18     //if ( $paged < $max_page - $p ) p_link( $max_page);
19     echo '<li class="next-page">'; next_posts_link('下一页'); echo '</li>';
20     p_link( $max_page, '尾页' );
21     //echo '<li><span>共 '.$max_page.' 页</span></li>';
22     echo '</ul>';
23     }
24     
25 function p_link( $i, $title = '' ) {
26     if ( $title == '' ) $title = "{$i}";
27     echo "<li><a href='", esc_html( get_pagenum_link( $i ) ), "'>{$title}</a></li>";
28     }
29
30 function p_curr_link( $i) {
31     echo '<li><span class="active">'.$i.'</span></li>';
32     }

八、文章分类页
分类页的模板名为archive.php,因为一般分类页也是文章列表,参照首页做就可以了。
就用:

1 <?php if( have_posts() ) : while( have_posts() ) : the_post(); ?>
2 <!-- 在这里调用数据 -->
3 <?php endwhile; ?>
4 <?php endif; ?>

页面显示分类的名称:

1 <?php $thiscat = get_category($cat); echo $thiscat ->name;?>

代码二

1 <?php
2 foreach((get_the_category()) as $category)
3 {
4 echo $category->cat_name;
5 }
6 ?>

参考:https://www.admin122.com/blog/3432.html

九、实现相关文章的方法
代码测试可用

1 <ul id="cat_related">
2 <?php
3 global $post;
4 $cats = wp_get_post_categories($post->ID);
5 if ($cats) {
6 $args = array(
7 'category__in' => array( $cats[0] ),
8 'post__not_in' => array( $post->ID ),
9 'showposts' => 6,
10 'caller_get_posts' => 1
11 );
12 query_posts($args);
13  
14 if (have_posts()) :
15 while (have_posts()) : the_post(); update_post_caches($posts); ?>
16 <li>* <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
17 <?php endwhile; else : ?>
18 <li>* 暂无相关文章</li>
19 <?php endif; wp_reset_query(); } ?>
20 </ul>

2.根据标签查找相关文章,并显示文章摘要

1 <ul id="tags_related">
2 <?php
3 global $post;
4 $post_tags = wp_get_post_tags($post->ID);
5 if ($post_tags) {
6  
7 foreach ($post_tags as $tag)
8 {
9 // 获取标签列表
10 $tag_list[] .= $tag->term_id;
11 }
12  
13 // 随机获取标签列表中的一个标签
14 $post_tag = $tag_list[ mt_rand(0, count($tag_list) - 1) ];
15  
16 // 该方法使用 query_posts() 函数来调用相关文章,以下是参数列表
17 $args = array(
18 'tag__in' => array($post_tag),
19 'category__not_in' => array(NULL),      // 不包括的分类ID
20 'post__not_in' => array($post->ID),
21 'showposts' => 20,               // 显示相关文章数量
22 'caller_get_posts' => 1
23 );
24 query_posts($args);
25  
26 if (have_posts()) :
27 while (have_posts()) : the_post(); update_post_caches($posts); ?>
28     <li>* <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
29     <p style="color: rgba(0, 0, 0, 0.32);margin-bottom: 8px;">
30         <?php echo wp_trim_words( get_the_content(),160);?>      
31     </p>
32 <?php endwhile; else : ?>
33 <li>* 暂无相关文章</li>
34 <?php endif; wp_reset_query(); } ?>
35 </ul>

参考:https://blog.csdn.net/weixin_33834910/article/details/91869215

十、首页显示最新的文件及缩略图
最简单的代码

1 <?php get_archives("postbypost", 10); ?>

代码二:

1 <?php query_posts("showposts=3&cat=1")?>
2 <?php while (have_posts()) : the_post(); ?>
3     <?php if ( get_post_meta($post->ID, ‘pre_image’, true) ) : ?>
4         <?php $image = get_post_meta($post->ID, ‘pre_image’, true); ?>  
5         <a href=”<?php the_permalink() ?>”><img alt=”<?php the_title(); ?>” src=”<?php echo $image; ?>”></a>
6     <?php else: ?>
7         <a href=”<?php the_permalink() ?>”><img alt=”<?php the_title(); ?>” src=”<?php bloginfo(‘template_url’); ?>/files/wp30a.png”></a>
8     <?php endif; ?>
9         <h3><a title=”#” href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>
10         <p><?php the_excerpt(); ?>…</p>
11 <?php endwhile; ?>

简化版本:
不过这个有时和文章详情页的代码有冲突,会导致文章详情页显示多篇文章的内容。

1 <?php query_posts("showposts=3&cat=1")?>
2 <?php while (have_posts()): the_post(); ?>
3     <h3><a title="#"" href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
4 <?php endwhile; ?>   

参考:
https://blog.csdn.net/cloudday/article/details/7276330

另外,发现没有设定文章的摘要,使用the_excerpt()也可以取到值,查了一下,原来:

如果在文章中没有编辑内容摘要字段,则默认截取文章的前55个字的内容

参考:http://www.xuxiaoke.com/wpfunc/131.html

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 快速入门 4小时学会WordPress模板制作(一) https://www.mbxzb.com/blog/file/rumen/44371.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务