做网站排名赚钱吗,安卓开发快速入门,黔西南做网站的有几家,网站开发三层架构先看看效果#xff0c;这个是我网站的归档页面#xff1a;http://www.shenjieblog.com/archives 其实WordPress自带了一个归档的功能#xff0c;但是只能显示在网页中的某一个部分#xff0c;但是我想单独制作一个归档页面#xff0c;因为看见很多网站都有这个#xff0c…先看看效果这个是我网站的归档页面http://www.shenjieblog.com/archives 其实WordPress自带了一个归档的功能但是只能显示在网页中的某一个部分但是我想单独制作一个归档页面因为看见很多网站都有这个制作一个单 独的归档页面可以让访问者清晰的看到我的网站内容可以让访问者轻松地找到自己想要的内容我最开始在阳光盒子的网站看见了他网站的归档页面感觉效果很 不错于是想制作一个和他一样的效果百度了一下加上自己的修改和美化弄了一下午终于做成了上图的效果不多说方法如下 原文 折腾功能代码实现WordPress归档页面模板[WP原生函数篇] 原创作者zwwooooo 特点 1. 按照年份、月份显示文章列表 2. 显示每月的文章数量需要配合及Query 3. 显示每篇文章的评论数 4. 使用 WordPress 原生函数实现数据调用 5. 这个存档函数会在数据库生成一个表 zww_archives_list 来做缓存只在发表/修改文章时才更新减少数据库查询。 6. 即使不使用第5点的数据库缓存功能也比以前的直接 SQL 语句省资源。 这两天稍微空闲点看到博客草已人高所以就找找以前有没有没解决的来访朋友评论提到的问题。然后想起我 2012 年写的《代码实现WordPress归档页面模板[WP原生函数篇]》按照这篇文档折腾的朋友大部分都成功了但是总是有部分朋友说出现文章排列不对或 者文章不全什么的因为觉得大部分朋友都能成功所以就一直没去分析。 今天分析了一下应该是有些月份如果 0 篇文章就会出现问题这是判断代码没写好的原因于是自己想了一下就重写了一个。 简单说下步骤 1. 归档函数 下面代码放到主题文件 functions.php 里面另外注意代码里面有中文所以要把 functions.php 文件编码改为 UTF8 无 BOM 格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /* Archives list v2014 by zwwooooo | http://zww.me */ function zww_archives_list() { if( !$output get_option(zww_db_cache_archives_list) ){ $output div idarchivespa idal_expand_collapse href#全部展开/收缩/a em(注: 点击月份可以展开)/em/p; $args array( post_type post, //如果你有多个 post type可以这样 array(post, product, news) posts_per_page -1, //全部 posts ignore_sticky_posts 1 //忽略 sticky posts ); $the_query new WP_Query( $args ); $posts_rebuild array(); $year $mon 0; while ( $the_query-have_posts() ) : $the_query-the_post(); $post_year get_the_time(Y); $post_mon get_the_time(m); $post_day get_the_time(d); if ($year ! $post_year) $year $post_year; if ($mon ! $post_mon) $mon $post_mon; $posts_rebuild[$year][$mon][] li. get_the_time(d日: ) .a href. get_permalink() .. get_the_title() ./a em(. get_comments_number(0, 1, %) .)/em/li; endwhile; wp_reset_postdata(); foreach ($posts_rebuild as $key_y $y) { $output . h3 classal_year. $key_y . 年/h3ul classal_mon_list; //输出年份 PS: 因为查询度有点大所以有加数据库缓存只在文章发表/修改时才会更新缓存数据所以测试时可以特意去后台点“快速编辑”文章然后点更新就可以更新缓存数据。 2. 复制一份主题的 page.php 更名为 archives.php然后在最顶端加入 1 2 3 4 5 ?php /* Template Name: Archives */ ? 在 archives.php 找到类似 在其下面加入如下代码 1 ?php zww_archives_list(); ? 然后新建页面如叫归档选择模版为 Archives 3. 给主题加载 jQuery 库没有加载的把下面这句扔到 functions.php 里面就行了。 1 wp_enqueue_script(jquery); 4. jQuery 代码 这次玩了逐个下拉/收缩效果想着很好但我博客感觉效果一般因为文章太多了…如果文章不多可以把代码里面 2 个 (s-101)?0:s-10 改为 s 效果会好看点。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 (function ($, window) { $(function() { var $a $(#archives), $m $(.al_mon, $a), $l $(.al_post_list, $a), $l_f $(.al_post_list:first, $a); $l.hide(); $l_f.show(); $m.css(cursor, s-resize).on(click, function(){ $(this).next().slideToggle(400); }); var animate function(index, status, s) { if (index $l.length) { return; } if (status up) { $l.eq(index).slideUp(s, function() { animate(index1, status, (s-101)?0:s-10); }); } else { $l.eq(index).slideDown(s, function() { animate(index1, status, (s-101)?0:s-10); }); } }; $(#al_expand_collapse).on(click, function(e){ e.preventDefault(); if ( $(this).data(s) ) { $(this).data(s, ); animate(0, up, 100); } else { $(this).data(s, 1); animate(0, down, 100); } }); }); })(jQuery, window); PS不知道怎么写 js 文件然后调用的朋友就直接打开 header.php 并找到 在其下面加上 1 script typetext/javascript上面那段 jQuery 代码/script 因为是放在主题的 the_content() 下面所以会默认使用主题写好的 h3 ul li 格式如果要更加有特色那么就要自己去修改 css 了 4. css根据需要写不写也可以的。HTML结构 1 2 3 4 5 6 7 8 9 10 11 div idarchives p[a idal_expand_collapse href#全部展开/收缩/a] em(注: 点击月份可以展开)/em/p h3 classal_year年份/h3 ul classal_mon_list lispan classal_mon月份em (本月文章数量)/em/span ul classal_post_list li号数: a href文章链接文章标题/a em(评论数量)/em/li /ul /li /ul /div 上面是原文现在我来说说我的总结补充和修改 1.首先说说上面有些不详细的步骤 1第二步原文说的复制page.php更名为 archives.php意 思就是先进入cpanel面板里面把page.php这个页面先下载下来路径一般是public_html/wp-content/themes/【你 主题的名字】这个目录中然后重命名为archives.php然后不要修改直接上传到cpanel面板和page.php页面相同的目录中之所 以说不要修改直接上传到cpanel面板中再修改是因为涉及到UTF-8的编码问题为了避免出错就上传后再修改然后按照原文所说的修改。 2第二步原文说的新建页面如叫归档选择模版为 Archives意 思就是在你上传了archives.php并修改好之后在WordPress后台中去新建一个页面然后在新建的时候在右边选项中选择模板为 Archives然后内容不需要填写可以修改一下固定链接让其好看一点比如我的固定链接是http://www.shenjieblog.com /archives如图3第四步原文作者其实没有给出作者自己的CSS效果代码但是我谷歌到了一篇文章中给出了原文作者的那种CSS效果然后之后我直接把那些CSS 代码复制到了我的style.css文件最下面但是出现了两个问题一是归档页面最上面的“全部展开/收缩”按钮看不见了想了好久没想出原因后来 打开审查元素发现其实那个其实还在只是因为和我的主题有一些冲突其实说白了就是位置错位了于是我删除了两行代码就解决了还有一个问题就是可能也是因为我主题的自带的ul标签效果和我现在设置的有冲突导致我ul前面的小方块没有去掉于是我 有手动添加了一行代码解决了。然后后来我发现字体太小了颜色也不好看我后来又在阳光盒子中看见他的归档页面就是我想要的效果就是本文最上面的图片那 种效果而且我和他使用的主题也都是一样的所以我就想说看看他的CSS是什么样的最开始的时候我不知道怎么查看他的那个CSS我不可能通过审查元素 看所以后来我想到了一个方法直接把他的style.css文件下载下来怎么下载呢直接查看源代码他的源代码很乱没关系。我把他的代码全部复制然后粘贴到Editplus中你也可以用记事本然后快捷键是ctrlF查找输入css然后查找直到找到下面这 种字样就代表这个是他使用的css样式一般都在最上面很好找的注意有时候不止一个然后知道这个的大体位置之后就在源代码中去查找找到之后右 键然后复制下载链接复制到迅雷中去下载就可以把他的CSS文件下载下来如果你像我一样使用Editplus的话可以直接在Editplus中右键 然后复制下载链接这个就是我下载下来的文件可以用记事本打开然后根据我上面写的那个HTML结构查找相应的代码快捷键是ctrlF也就是输入archives然后查找找到之后复制那些代码到自己后台的style.css文件的最后就可以了然后可以根据自己的想法修改。 然后我现在我贴出我修改的代码修改的部分会有注释然后你们如果要用的话也可以自己修改一下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 #archives { position: relative; /*top: -60px; left: 150px;*//*原文这两行代码就是影响我最上面“全部展开/收缩”效果的我删除了这个*/ } #archives h3 { margin-bottom: 0; padding: 0 15px; border-bottom: 1px solid #ddd; font-size: 20px;/*这个字体大小和下面的我都做了一些修改*/ font-weight: 400; text-align: center; letter-spacing: 5px } #archives ul { list-style: none; margin: 0 30px; padding: 10px 0 20px 10px; border-left: 1px solid #ddd; font-size: 18px } #archives li { list-style: none;/*这一行代码是我自己添加的不加这个就会出现ul标签前面的黑色小方块很难看*/ position: relative; line-height: 30px } #archives ul ul { margin: -15px 0 0 0; padding: 15px 0 10px 0 } #archives ul ul li { padding: 0 0 0 15px } #archives ul ul li:before { content: ; position: absolute; left: 0; top: 10px; border-top: 5px dashed transparent; border-bottom: 5px dashed transparent; border-left: 10px solid #ddd } #al_expand_collapse { display: inline-block; line-height: 24px; padding: 0 10px; color: #fff; font-size: 12px; text-decoration: none; background: linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent;/*这个颜色和下面的我都做了一些修改*/ background: -webkit-linear-gradient(to bottom, #4caf50 20%, #388e3c 80%) repeat scroll 0 0 transparent } #al_expand_collapse:hover { background: linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent; background: -webkit-linear-gradient(to bottom, #388e3c 20%, #4caf50 80%) repeat scroll 0 0 transparent } #archives em { padding-left: 5px; font-size: 12px; color: #777 } #archives .al_mon { padding-left: 5px; font-size: 14px; font-weight: 700 } #archives .al_mon:after { content: ; position: absolute; left: -10px; top: 15px; width: 10px; height: 1px; background: #ddd } #archives .al_mon em { font-size: 12px; font-weight: 400 } 把上面这些代码复制到自己WordPress外观——菜单——编辑——style.css文件的最底部即可。然后刷新一下就可以了。 PS:注意如果刷新之后没有效果的话可能是因为浏览器的缓存关闭浏览器之后清除一下缓存再试就可以了因为我遇到了这个问题所以提醒一下大家。 原文网址http://zww.me/wordpress-archive-page-template-wp-primary-function-2014-edition.z-turn CSS代码参考网址http://www.erro.cn/archives/3856.html 转载于:https://www.cnblogs.com/shenjieblog/p/5061237.html
