Category Archives: Wordpress

Wordpress 无法切换可视化和文本编辑器

1. 背景介绍

升级 WordPress 到最新版本后,发现点击“添加媒体”、“可视化/文本编辑模式切换”等功能按钮均失效没反应

2. 原因

查找资料发现wordpress为了提高效率以及加载速度,把要用到的js文件合并在一起,升级到新版本后可能因为某些原因导致合并出现错误,因此产生了按钮异常等情况。

官方解释

Disable Javascript Concatenation

To result in a faster administration area, all Javascript files are concatenated into one URL. If Javascript is failing to work in your administration area, you can try disabling this feature:

define('CONCATENATE_SCRIPTS', false);

大概意思是:

wordpress 为了提高效率要求你所有的js要集中到一起,只需更改路径集中存放,问题迎刃而解,具体操作很简单,在wordpress根目录下找到 wp-config.php 这个配置文件,打开文件后在页面的最后添加下面代码:

define('CONCATENATE_SCRIPTS', false);

3. 解决办法

在网站根目录的wp-config.php文件中,添加以下这句代码即可:

define('CONCATENATE_SCRIPTS', false);

这段代码的作用是禁止js连接在一起

WordPress 页面模板选项无法显示

1.检查页面模板格式是否错误

在主题根目录下找到页面模板,检查头部是否有下列代码,其中 ‘About Us’ 是页面模板名称。

<?php/*Template Name: About Us */?>

2. 主机 PHP 环境禁用了 scandir 函数

此操作需要用到服务器权限,适合有VPS或服务器权限的人操作,如果用的是虚拟主机,就找空间管理商,请他帮你操作一下。

2.1 找到 PHP 的配置文件 php.ini

linux 环境下一般在 /usr/local/php/etc/php.ini

sudo vi /usr/local/php/etc/php.ini

2.2 找到 “disable_functions=” 

删除后面的 ‘scandir’ 保存

2.3 重启 PHP 服务

/etc/init.d/php-fpm restart

 

Force Regenerate Thumbnails - 重新生成缩略图

WordPress 插件:Force Regenerate Thumbnails

使用情境:

  1. 更换主题,为了适应新主题,缩略图的尺寸需要修改。这样就需要将以前上传的图片重新生成新尺寸的缩略图,并且要删除旧尺寸的缩略图,这样可以减少不必要的空间浪费。
  2. 主题开发的时候,有时候会更改缩略图尺寸,也可以用这个重新生成缩略图

安装与使用方法:

安装:

可以在 WordPress 后台-插件-安装插件里搜索 Force Regenerate Thumbnails ,然后点击安装并激活

激活后,在Tools(工具)菜单下可找到它的选项

使用:

1. 后台-工具-Force Regenerate Thumbnails ,可以重建所有缩略图。

QQ20160326-0

2. 重建单个缩略图

后台-多媒体,找到需要重新生成的缩略图

force

 

WordPress 插件地址:

Force Regenerate Thumbnails

修改 WordPress 发送邮件的默认邮箱和发件人

默认情况下,用户收到网站通知邮件所显示的发件人格式:WordPress < wordpress@xxx.com >

比如:用户注册、激活等场景

QQ20160326-1

这样的话,用户都不知道谁发的,而且容易被判定为垃圾邮件,直接放到垃圾箱。

可以通过 wp_mail_fromwp_mail_from_name 来修改 WordPress 发送邮件的默认邮箱和发件人。将下面的代码添加在主题的 functions.php 中: Continue reading

WordPress 常用插件

WordPress开发时常用的一些插件,会长期更新,之后会对每个插件做详细的介绍。

  1.  自定义字段
    1. Advanced Custom Fields
  2. 自定义内容类型
    1. Pods  教程: http://ninghao.net/blog/1409
    2. Types
    3. Custom Post Type UI
  3. 后台侧边栏自定义
    1. Admin Menu Editor
  4. 解决中文图片无法上传
    1. File Renaming on upload
  5. 分类目录描述转换为编辑器
    1. CategoryTinymce   分类目录描述转换为编辑器
    2. Categories Images  分类目录图像
  6. 访问权限管理
    1. Advanced Access Manager
  7. 缩略图
    1. Force Regenerate Thumbnails  重新生成缩略图
  8. 自定义文章类型
    1. Seamless Sticky Custom Post Types  文章置顶
    2. Custom Post Type Permalinks  修改自定义文章链接
  9. 文章排序
    1. Simple Custom Post Order  对文章进行拖动排序

WordPress 获取自定义分类法指定分类ID文章

<?php
$args = array(
  'post_type'=>'slider', //文章类型
  'tax_query'=>array(
    array(
      'taxonomy'=>'slideshow', //自定义分类法为slideshow
      'terms'=>13  //分类ID为13
    )
  ),
  'order'=>'ASC' //排序
);
query_posts( $args );
?>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<h3><?php the_title(); ?></h3>   //输出内容
<?php endwhile; wp_reset_query(); endif; ?>

其中tax_query参数在官方query_posts中没有找到介绍,在WP_Query中有介绍

参考:

query_posts

WP_Query

用wget命令进行整站下载

使用 wget 命令可以对目标站进行整站下载,使用下面的方法还可以将下载的页面中的链接转换为本地链接。

wget -r -p -np -k http://xxx.com/abc/

 wget 遭遇403 forbidden解决办法:

对方服务器检查user_agent,我们可以使用-U(大写)参数来伪装成各种浏览器,从而骗过服务器检查,不让对方认为我们在使用下载工具:

wget -r -p -np -k -U Chrome/21.0.1180.89 http://xxx.com/abc/

 

参数说明:

-r,  –recursive(递归)                    specify recursive download.(指定递归下载)
-k,  –convert-links(转换链接)      make links in downloaded HTML point to local files.(将下载的HTML页面中的链接转换为相对链接即本地链接)
-p,  –page-requisites(页面必需元素)    get all images, etc. needed to display HTML page.(下载所有的图片等页面显示所需的内容)
-np, –no-parent(不追溯至父级)            don’t ascend to the parent directory.
另外断点续传用-nc参数 日志 用-o参数

详细参数可参考 wget 中文详细使用说明

 

WordPress导航菜单添加iconfont

wordpress-icon0331

这个是我们射击师大人给的设计稿

wordpress默认的菜单功能也可以通过添加CSS类添加背景图片实现。但是因为网站是响应式的,所以选用iconfont来实现。

代码结构:

<ul class="clearfix">
 <li class="current-menu-item"><a href=""><span class="iconfont icon-diannaoduan"></span><h3>PC</h3></a></li>
 <li class=""><a href=""><span class="iconfont icon-anzhuo"></span><h3>ANDROID</h3></a></li>
 <li class=""><a href=""><span class="iconfont icon-pingguo"></span><h3>IOS</h3></a></li>
 <li><a href=""><span class="iconfont icon-meitibaodao"></span><h3>媒体</h3></a></li>
 <li><a href=""><span class="iconfont icon-gongzhong"></span><h3>平台</h3></a></li>
 <li><a href=""><span class="iconfont icon-tv"></span><h3>TV</h3></a></li>
</ul>

要实现这一效果,就需要借助 wp_nav_menu 函数的 walker 对象了。在functions.php中添加以下代码:

/** 导航菜单 Walker 对象 icon 字体优化
 */
class description_walker extends Walker_Nav_Menu{
 function start_el(&$output, $item, $depth, $args){
 global $wp_query;
 $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 $class_names = '';
 $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
 $class_names = ' class="'. esc_attr( $class_names ) . '"';
 $output.= $indent . '<li' . $class_names .'>';
 $icon = ! empty( $item->attr_title ) ? esc_attr( $item->attr_title ) : '';
 $attributes = ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; //链接目标
 $attributes.= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; //链接关系网 也就是rel属性
 $attributes.= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; //链接
 $prepend = '<h3>';
 $append = '</h3>';
 $item_output = $args->before;
 $item_output.= '<a'. $attributes .'><span class="iconfont '. $icon .'"></span>';
 $item_output.= $args->link_before. $prepend . apply_filters( 'the_title', $item->title, $item->ID ) . $append;
 $item_output.= '</a>';
 $item_output.= $args->after;
 $output.= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
 }
}

在模板中调用:

<?php
 wp_nav_menu(array(
 'theme_location' => 'works-menu',
 'walker' => new description_walker(),
 'container' => false,
 'menu_class' => 'clearfix',
 ));
 ?>

参考资料:

Iconfont

wordpress官方函数参考:wp_nav_menu