自定义WordPress登录页面 如果你看腻了Wordpress默认登录界面，或者想将Wordpress的logo替换为自己网站logo，并改变其外观，可以参考此文，打造一个个性化的登录页面。一、将下面代码加到主题functions.php模版文件的最后。function custom_login() { echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/custom_login/custom_login.css" />'; } add_action('login_head', 'custom_login');二、在所用主题中新建一个名称为：custom_login 的文件夹，并在其中新建：custom_login.css及制作好的网站LOGO： logo.png也放进去。三、将下面代码添加到custom_login.css中。/** 背景及字体 **/ html,body.login{ font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif; } body{ height: auto; } /** 去掉链接下划线 **/ html a{ text-decoration: none; } /** 登录DIV **/ #login { background:#fff; border: 1px solid #ccc; width:400px; margin: 80px auto 0; padding: 10px 10px 20px 10px; border-radius:5px; box-shadow:0 4px 10px -1px rgba(200, 200, 200, 0.7); } /** 替换logo **/ .login h1 a{ background: url(logo.png) no-repeat center; width:400px; height: 150px; } /** 提示 **/ .updated, .login .message { background:#fff; border: none; text-align: center; } /** 表单 **/ .login form { box-shadow:none; border: none; padding: 26px 24px 24px; } #loginform, #registerform, #lostpasswordform{ background:transparent; border:none; } /** 按钮 **/ .button-primary,.submit .button-primary,#login form .submit input { width:83px; font-weight: bold; border:none; }题外话:也可以设置背景的图片，或者调用bing的每日一图作为背景//调用bing美图作为登录页背景图 function custom_login_head(){ $str=file_get_contents('http://cn.bing.com/HPImageArchive.aspx?idx=0&n=1'); if(preg_match("/<url>(.+?)<\/url>/ies",$str,$matches)){ $imgurl='http://cn.bing.com'.$matches[1]; echo'<style type="text/css">body{background: url('.$imgurl.');width:100%;height:100%;background-image:url('.$imgurl.');-moz-background-size: 100% 100%;-o-background-size: 100% 100%;-webkit-background-size: 100% 100%;background-size: 100% 100%;-moz-border-image: url('.$imgurl.') 0;background-repeat:no-repeat\9;background-image:none\9;}</style>'; }} add_action('login_head', 'custom_login_head');

WordPress分类列表函数:wp_list_categories用法及参数详解举例 wp_list_categories 函数 是 WordPress 中用来罗列系统中分类链接的函数，将分类以列表的形式显示为链接。点击分类的链接，就可以访问该分类下的所有文章的存档页面。注意：1、 wp_list_categories() 和 list_cats() 以及 wp_list_cats() 的使用类似，但是后面 2 个已经弃用。2、如果你希望不格式化输出分类，请使用 get_categories()3、因为 WordPress 中内置扩展的小工具功能，所以我们不经任何函数就可以在边栏或是其他我们想要的位置显示一个分类列表，所以wp_list_categories函数就很少有人用到。4、该函数使用起来有点类似于wp_list_bookmarks()5、该函数输出 应当包含在 ul 标签内使用方法wp_list_categories( string|array $args = '' )默认用法<?php wp_list_categories( $args ); $args = array( 'show_option_all' => '',//是否列出分类链接 'orderby' => 'name',//按名称排列 'order' => 'ASC',//升、降序 'style' => 'list',//是否用列表（ul>li） 'show_count' => 0,//是否显示文章数量 'hide_empty' => 1,//是否显示无日志分类 'use_desc_for_title' => 1,//是否显示分类描述 'child_of' => 0,//是否限制子分类 'feed' => '',//是否显示rss 'feed_type' => '',//rss类型 'feed_image' => '',//是否显示rss图片 'exclude' => '',//排除分类的ID，多个用',（英文逗号）'分隔 'exclude_tree' => '',//排除分类树，即父分类及其下的子分类 'include' => '',//包括的分类 'hierarchical' => true,//是否将子、父分类分级 'title_li' => __( 'Categories' ),//列表标题的名称 'show_option_none' => __('No categories'),//无分类时显示的标题 'number' => null,//显示分类的数量 'echo' => 1,//是否显示，显示或者返回字符串 'depth' => 0,//层级限制 'current_category' => 0,//添加一个没有的分类 'pad_counts' => 0,//这个我也不明白 'taxonomy' => 'category',//使用的分类法 'walker' => null//用于显示的类 ?>用法举例1、包含或排除某分类：意思就是把分类ID为3，5，9，16的分类按名称顺序来排序：<?php wp_list_categories('orderby=name&include=3,5,9,16'); ?>或者<ul> <?php wp_list_categories( array( 'orderby' => 'name', 'include' => array( 3, 5, 9, 16 ) ) ); ?> </ul>2、按名称排列，并显示每个分类的日志总数，并不显示ID为10的分类：<?php wp_list_categories('orderby=name&show_count=1&exclude=10'); ?>或者<ul> <?php wp_list_categories( array( 'orderby' => 'name', 'show_count' => true, 'exclude' => array( 10 ) ) ); ?> </ul>3、显示或隐藏列表标题：过滤ID为4和7的分类，并且列表标题设置为“511遇见”：<?php wp_list_categories('exclude=4,7&title_li=511遇见'); ?>4、列表中只显示ID为5、9、23的分类，并把列表标题改为 Poetry （下面的格式是为了把“要显示的数据”和“标签参数区分开来”）<?php wp_list_categories('include=5,9,23&title_li=<h2>' . __('Poetry') . '</h2>' ); ?>或者<ul> <?php wp_list_categories( array( 'include' => array( 5, 9, 23 ), 'title_li' => '<h2>' . __( 'Poetry', 'textdomain' ) . '</h2>' ) ); ?> </ul>title_li参数设置或隐藏一个标题或标题wp_list_categories生成的类别列表。它默认为”(__(类别)”,即它显示这个词“类别”列表的标题。如果这个参数设置为null或空值,不显示标题。下面的示例代码不包括类别id 4和7和隐藏列表标题:<ul> <?php wp_list_categories( array( 'exclude' => array( 4,7 ), 'title_li' => '' ) ); ?> </ul>5、只显示指定分类的子分类显示ID为 8 的分类的子分类，根据ID排序，显示文章数，并且将分类描述作为连接的 title属性。注意：如果父分类没有文章，将不显示父分类。<ul> <?php wp_list_categories('orderby=id&show_count=1&use_desc_for_title=0&child_of=8'); ?> </ul>或者：<ul> <?php wp_list_categories( array( 'orderby' => 'id', 'show_count' => true, 'use_desc_for_title' => false, 'child_of' => 8 ) ); ?> </ul>6、移除分类计数的括号当 show_count=1 ，每个分类的后面都将显示文章数，同时使用括号包含。如果你要移除括号，可以使用下面的代码<ul> <?php $variable = wp_list_categories( array( 'echo' => false, 'show_count' => true, 'title_li' => '<h2>' . __( 'Categories', 'textdomain' ) . '</h2>' ) ); $variable = preg_replace( '~\((\d+)\)(?=\s*+<)~', '$1', $variable ); echo $variable; ?> </ul>7、显示分类和 RSS Feed 连接根据分类名称进行排序，显示文章数量，并且显示每个分类的 RSS 订阅链接：<ul> <ul> <?php wp_list_categories( array( 'orderby' => 'name', 'show_count' => true, 'feed' => 'RSS' ) ); ?> </ul> </ul>使用Feed 图标替换文本，可以使用下面的代码：<ul> <?php wp_list_categories( array( 'orderby' => 'name', 'show_count' => true, 'feed_image' => '/images/rss.gif' ) ); ?> </ul>显示自定义分类法的项目：在3.0版本添加了taxonomy 参数到 wp_list_categories() 。让你可以通过 taxonomy 参数来设置要显示的是哪种分类法下的分类项目。比如要显示分类法为 genre 的分类列表：// List terms in a given taxonomy using wp_list_categories (also useful as a widget if using a PHP Code plugin) $taxonomy = 'genre'; $orderby = 'name'; $show_count = false; $pad_counts = false; $hierarchical = true; $title = ''; $args = array( 'taxonomy' => $taxonomy, 'orderby' => $orderby, 'show_count' => $show_count, 'pad_counts' => $pad_counts, 'hierarchical' => $hierarchical, 'title_li' => $title ); ?> <ul> <?php wp_list_categories( $args ); ?> </ul>显示文章对应的分类：根据父-子关系来排序文章的分类。类似于 get_the_category_list() 函数（根据名称排序分类）。这个例子必须使用内循环。$taxonomy = 'category'; // Get the term IDs assigned to post. $post_terms = wp_get_object_terms( $post->ID, $taxonomy, array( 'fields' => 'ids' ) ); // Separator between links. $separator = ', '; if ( ! empty( $post_terms ) && ! is_wp_error( $post_terms ) ) { $term_ids = implode( ',' , $post_terms ); $terms = wp_list_categories( array( 'title_li' => '', 'style' => 'none', 'echo' => false, 'taxonomy' => $taxonomy, 'include' => $term_ids ) ); $terms = rtrim( trim( str_replace( '<br />', $separator, $terms ) ), $separator ); // Display post categories. echo $terms; }标记和样式化分类列表默认情况下， wp_list_categories() 生成的是无序列表（ul），使用 li 标签来包含每个分类，而且列表的标题为”Categories”。你可以通过设置 title_li 为空值来隐藏标题。你可以自定义包装 有序列表或无序列表。如果你不需要以列表输出分类，可以将 style 参数设置为 none。你可以根据下面的CSS选择器来样式化输出：li.categories { ... } /* outermost list item */ li.cat-item { ... } li.cat-item-7 { ... } /* category ID #7, etc */ li.current-cat { ... } li.current-cat-parent { ... } ul.children { ... }小结1、官方文档 阅读更多2、因为我们没有必要再使用这个函数，最让我们心动的就是最后这个CSS的改变，这样可以让你更灵活的显示在前台，比如有人问，如何去掉函数中封装的 li 标签，这样问的原因我猜主要是它的布局不是采用了 li 标签，或者一些样式加布进去，所以你多多研究一下总后一个例子还是很有必要的。3、如何去掉li<?php wp_list_categories('style=none'); ?>

WordPress函数 之 query_posts用法汇总 最近经常有网友跟我咨询WordPress函数query_posts的相关用法，说起来query_posts实在是太强大，参数无数，用法更是无数，如果让我说它的用法，我根本没法一一说清楚。开始之前，你可以先看看query_posts的官方文档，query_posts的全部参数可以参考：WP_Query。不过看文档对很多人来说可能会很困难，本文将介绍几种常见的用法，不过一切用法都是从官方文档中来的，学会看文档才是王道。query_posts函数在WordPress主题中是用于控制哪些文章可以出现在主循环中，可能说主循环很多人都不懂，那么举个例子，首页、存档页的这些文章（包括分页中的）都是在主循环中的。在不使用query_posts函数控制的情况，首页、存档页等都是按照文章的发布时间列出你博客上所有已发布的文章，而如果你想定义哪些文章可以显示，哪些文章不显示，文章按照什么样的方法排序等，那么你就要用到query_posts函数了，本站首页的文章排序：随机阅读、评论最多和标题排序就是用query_posts函数来实现的。基本用法：首先介绍一下如何使用query_posts函数。在主题目录下找到存档页面文件，存档页面包括index.php、archive.php等，一般分类页、标签页、日期页和作者页等都是用archive.php，具体的WordPress主题文件构成可以看这篇文章：WordPress主题文件构成确定了你要控制哪个页面的文章列表，那么我们就可以开始了，比如你想让首页的文章按评论数排序，那么index.php中的代码基本框架就是这样的：12345678910111213141516<?php// query_posts函数query_posts('orderby=comment_count');// 主循环if ( have_posts() ) : while ( have_posts() ) : the_post(); ..endwhile; else: ..endif;// 重置querywp_reset_query();?>其实你要做的就是在index.php中查找if (have_posts())或while (have_posts())，在前面添加query_posts函数即可。不过以上方式可能会导致首页无法分页，那你可以将query_posts函数改成这样的行式：12345678$args = array(    // query_posts参数，具体参数可以参加官方文档    'orderby'   => comment_count);// 下面这一行代码是必须的，不然不能分页$arms = array_merge($args, $wp_query->query);query_posts($arms);下面是一些常见的query_posts函数用法，你可以直接用到你的主题中。一、只显示含有某个自定义字段的文章如果你想只显示添加了某个自定义字段的文章，并按照这个字段的值来对文章排序，那么你可以参加这篇文章：WordPress手动修改文章排列顺序其实这种方式你可以看成怎样只显示我推荐的文章，那么含有这个自定义字段的文章就是推荐文章。二、怎样让某分类的文章不显示/显示如果你不想让某分类的文章出现在主循环中，那么你可以使用query_posts添加参数category__not_in即可：1234567$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;$args = array(    // 2, 6就是你不想显示的分类ID，多个用半角逗号隔开    'category__not_in'   => array(2, 6),    'paged' => $paged);query_posts($args);如果只想让显示某个分类的文章，可以将category__not_in改成category__in。同理，如果不显示某标签下的文章，可以将category__not_in改成：tag__not_in，或者只想让显示某个标签下的文章，可以将category__not_in改成tag__in，后面跟着标签的ID即可。三、如何对文章进行排序1234567$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;$args = array(    // 以下代码中的title就是orderby的值，按标题排序    'orderby'   => title,    'paged' => $paged);query_posts($args);根据orderby的值不同，可以让文章按照很多种方式进行排序，下面是列举几个常见的值及其对应的排序方式:title：按标题；date：按发布日期；modified：按修改时间；ID：按文章ID；rand：随机排序；comment_count：按评论数四、只显示相应ID的文章如我只想显示ID为2,4,6的文章，可以使用以下代码：1234567$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;$args = array(    // 以下代码中的2,4,6就是文章的ID    'post__in'   => array(2,4,6),    'paged' => $paged);query_posts($args);如果不想显示2,4,6这几篇文章，可以将 post__in 改成 post__not_in 。另外如果只想显示置顶文章，那么可以将array(2,4,6)改成get_option('sticky_posts')，这段代码会自动给你填充所有置顶文章的ID。五、让置顶文章不置顶如果你不想让置顶文章显示在顶部，而是让它们安装正常的顺序排列，那么可以使用以下代码：123456$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;$args=array(    'paged' => $paged,    'ignore_sticky_posts' => 1);query_posts($args);六、列出所有状态的文章WordPress的文章状态有很多种，包括已发布、草稿、已删除、私人的、定时发布的等等，如果你想将这些文章都统统显示出来，那么可以这样：123456$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;$args = array(    'post_status' => array('publish', 'pending', 'draft', 'future', 'private', 'trash'),    'paged' => $paged);query_posts($args);post_status参数可以控制具体的文章状态，值包括pending（待审）、publish（已发布）、draft（草稿）, future（定时）, private（私有）, trash（已删除）。七、控制文章的数量如果你想控制要显示的文章数量，可以使用showposts参数：1234567$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;$args = array(    // 控制只显示10篇文章，如果将10改成-1将显示所有文章    'showposts' => 10,    'paged' => $paged);query_posts($args);如果你只是想控制首页、分类页等每各分页显示的文章数量，可以在WordPress管理后台 - 设置 - 阅读那里设置博客页面至多显示多少篇文章。

给wordpress博客的导航菜单添加个性图标或字体 目前图标字体非常流行，图标字体使用简单，与图片格式的小图标相比，支持视网膜显示，可以无限放大。特别是一些响应式设计的主题模板，都会或多或少使用图标字体，包括我的站点，除了主题集成的图标字体，我们还可以单独为导航菜单上的项目也配上个性化的图标字体。给wordpress博客的导航菜单添加个性图标字体操作过程一、WP后台--插件--安装插件页面搜索：Font Awesome 4 Menus，下载安装并启用。二、WP后台---外观---菜单，进入菜单设置页面，选择并编辑一个菜单项，在CSS类中输入一个图标字体选择器名称，如图：如果在编辑菜单项目面板中无CSS类，可以打开右上角的“显示选项”，在显示菜单高级属性中勾选“CSS类”。图标字体选择器名称，打开此页查看：由此直达.http://fortawesome.github.io/Font-Awesome/icons/点开一个认为合适的图标字体，在下会显示类似：<i class="fa fa-home"></i>只需在菜单CSS类中输入fa fa-home就可以了。如果认为上面插件提供的图标字体不符合自己的要求（其实这套Font Awesome图标字体早已烂大街），还可以自己做一套更加个性化的图标字体。图标字体在线制作：由此直达.https://icomoon.io/app/#/select

wp-UEditor 文章页面查看大图 前面我们已经安装好了百度的UEditor并且升级完成，本人使用一段时间后感觉图片方面还是比较薄弱的，在移动终端和PC端上都无法对图片进行放大。也没有图片相册的功能，使文章看起来很长，图片看上去很小而且不清楚，所以就感觉应该升级一下。PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。1、下载PhotoSwipe 地址：http://photoswipe.com/（本人使用的时候是4.1.1）2、解压PhotoSwipe-master可以看到很多文件，我就不一一讲解了，大家可以去看官网的API3、拷贝dist下的所有文件到，所启用主题的lib/PhotoSwipe/没有该文件夹的就新建吧(想要封装成插件的同学就自己封装一下)4、新建一个php写入引用PhotoSwipe的文件<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/photoswipe.css"> <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/default-skin/default-skin.css"> <script src="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/photoswipe.min.js"></script> <script src="<?php bloginfo('template_directory'); ?>/lib/PhotoSwipe/photoswipe-ui-default.min.js"></script>5、写入弹出放大缩小的界面，我是直接抄官网的<!-- 图片显示详情 --> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <!-- Background of PhotoSwipe. It's a separate element, as animating opacity is faster than rgba(). --> <div class="pswp__bg"></div> <!-- Slides wrapper with overflow:hidden. --> <div class="pswp__scroll-wrap"> <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --> <!-- don't modify these 3 pswp__item elements, data is added later on. --> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <!-- Controls are self-explanatory. Order can be changed. --> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR --> <!-- element will get class pswp__preloader--active when preloader is running --> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> <!-- /图片显示详情 -->6、写入js监听事件，img有点击事件就弹出放大缩小的模块/** * Created by hua on 16-4-11. */ jQuery(document).ready(function() { $("#logPanel .entry-content img").bind("click",function(){ var imgArr = $(this); //var imgArr = $('#logPanel .entry-content img'); var index = 0; var items = new Array(); imgArr.each(function(i){ var item = new Object(); item.src = imgArr[i].src; item.w = imgArr[i].naturalWidth; item.h = imgArr[i].naturalHeight; items.push(item); }) var pswpElement = document.querySelectorAll('.pswp')[0]; var options = { // history & focus options are disabled on CodePen index:index, history: false, focus: false, showAnimationDuration: 0, hideAnimationDuration: 0 }; var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); }); })OK了这样图片就能放大缩小了，因为本人的文章存在异步加载，lazyload功能，所以我就想看哪张点哪张，并没有类似相册的功能。要加的话也可以，PhotoSwipe是支持异步加载图片的。

wp-UEditor 升级 注意：还没有安装WordPress的朋友请移步https://blog.oneday8.com/?p=89本人原来安装的UEditor安装后版本过于落后，而且发文章的时候，会默认吧文章内的图片提交到多媒体类，这样多媒体模块会非常混乱。所以我打算升级一下WP-UEditor但是都没有找到WordPress版本的。1、进入官网下载最新版本http://ueditor.baidu.com/website/download.html2、清空老版本ueditor文件下的文件3、再将新的官网下载的utf8-php文件夹下的内容复制到到老版本的ueditor4、修改老版本目录下的main.php,删除那些不存在的php5、修改/php/config.json新版本的图片文件等存放路径

Wordpress Error 324 (net::ERR_EMPTY_RESPONSE) Wordpress 在wdcp环境下一直出现部分页面一直出现Error 324 (net::ERR_EMPTY_RESPONSE) 错误。其中包括插件管理，主题管理，评论管理等等，小编找了很久都不知道是什么原因后来终于知道是WDCP默认的php版本是5.2.17，就会出现这个问题，必须升级至5.3版本以上。A、升级PHP5.3wget http://soft.laozuo.org/wdcp/php_up53.sh sh php_up53.shB 、升级PHP5.5wget http://soft.laozuo.org/wdcp/php_up55.sh sh php_up55.sh升级时会遇到错误如下：第一次运行以上脚本后出现以下错误gcc: Internal error: Killed (program cc1) Please submit a full bug report. See <http://bugzilla.redhat.com/bugzilla> for instructions. make: *** [ext/fileinfo/libmagic/apprentice.lo] Error 1 make err问题原因：内存太小了，php5.3的bug，必须是1G的内存才可以解决办法：我就临时扩充了一下内存，安装成功后收回第二次在运行以上代码时又出现以下错误/root/php-5.3.17/ext/iconv/iconv.c: In function ‘zm_startup_miconv’: /root/php-5.3.17/ext/iconv/iconv.c:254: 错误：‘_libiconv_version’ 未声明 (在此函数内第一次使用) /root/php-5.3.17/ext/iconv/iconv.c:254: 错误：(即使在一个函数内多次出现，每个未声明的标识符在其 /root/php-5.3.17/ext/iconv/iconv.c:254: 错误：所在的函数内只报告一次。) make: *** [ext/iconv/iconv.lo] 错误 1 make err问题原因：缺失了lib需要重新安装iconv_ins，注意版本需要和php一致解决办法：wget http://down.wdlinux.cn/in/iconv_ins.sh sh iconv_ins.sh第二次在运行以上代码时又出现以下错误iconv_ins.sh: line 14: ./configure: Permission denied make: *** No targets specified and no makefile found.  Stop. [root@AY************b ~]#  No targets specified and no makefile found. ^C问题原因：wdcp的云锁阻止导致的，我们要先去卸载云锁再安装解决办法 执行 /usr/local/yunsuo_agent/uninstall 先卸载了云锁，在安装iconv_ins最终出现 php update is OK 表示安装成功