PHP & Wordpress

  1. wordpress移动设备下图片自适应

    现在移动终端的访问已经成为趋势,所以为了提高大家的阅读体验,现在对于图片等的自适应是非常重要的,现在新的主题基本上都是支持图片在移动终端的自适应的 8-)

    当然了,对于像我这样比较守旧的主题,以及部分主题是不能友好的支持移动终端的,其实有一个很简单的办法来让主题在移动终端实现图片的自适应效果。

    这是没有启用自适应的效果,会发现图片外溢了,影响美观 :evil:

    这是启用了自适应效果后,图片的整体展示效果明显得到了提升 :-)

    一、备份主题theme的style.css文件,然后通过Dreamweaver打开style.css文件,然后检索是否存在max-width

    如果存在,当然就很简单了,改成100%就可以了,如果没有发现max-width,然后就在你的style.css中添加如下就可以了:

    p img { padding: 0; max-width: 100%; height: auto; }

    PS: :-) 通过max-width来定义相对宽度,height则定义高度,这样避免图片拉伸影响美观,最后提醒一下,图片前后不要出现<h4>和</h4>之类的标签,不然也可能不能显示效果 :arrow:

    ...READ MORE
  2. wordpress数据迁移后首页空白

    由于启用了新域名sky.gs,并且在迁移wordpress数据到新服务器的过程是很顺利的,无非就是保存sql、theme、uploads文件夹等等,但是在新的主机中完成了这一切看似很顺利的操作以后,却出现了一系列不可思议的麻烦。

    一、后台不能进入,前台、后台均显示为空白 :cry:

    解决办法:进入主机的网站管理界面进入PhpMyAdmin,

    然后找到数据库中的wp-options,

    并选择“操作”菜单予以清空wp-options中的数据,

    然后删除网站根目录下的wp-config.php文件,重新点击域名并予以重新安装,然后后台可以进入了。

    二、因为担心插件的原因,在ftp下更改掉plugins文件夹的名称一次性禁用所有插件 ;-)

    三、进入后台后,还是有问题 :-?

    发现在修改文章post后,点击保存的时候就会出现页面空白,没有任何错误提示,于是想到底是wordpress本身原因还是主题theme的原因了,于是从官网下载一个官网的主题theme并启用,这个现象就消失了,终于知道应该就是主题的原因了,其实主题最容易出问题的地方无非就是function.php文件了,予以下载后用Dreamweaver检查果然发现了因为是空格的原因,所有删除保存覆盖就OK了。

    PS:在wordpress数据迁移的时候,首先当然要做好数据备份工作,然后对于新的主机调试的时候,最好是采用wordpress的默认主题theme进行调试,这样更容易发现错误 :arrow:

    庆祝新域名,新的香港主机启用。

  3. wordpress论坛插件之bbpress中文汉化版

    wordpress的开源属性决定了本身的无所不能。wordpress可以做CMS、电影、下载站等都有非常不错的尝试和用户体验。有的时候,wordpress需要一个内置的论坛,bbpress是非常不错的推荐。

    之前笔者用过一个论坛插件,simple press是一个非常好用的插件,无奈现在simple press 5.X以后的版本需要付费,所以只好放弃,当然对于付费用户而言,simple press是非常不错的选择。效果如下:

    对于大多数免费用户而言,bbpress是非常不错的选择,因为bbpress同样属于wordpress公司开发产品,在升级及兼容性方面是无须怀疑的。准备工作:

    一、升级wordpress,最好是升级到最新的版本,比如现在的wordpress4.7版本,

    二、下载本站提供的中文版的bbpress插件,当然也可以登陆bbpress官网自行下载官网的英文版,并安装插件,然后激活插件;

    三、这个时候进入后台设置可以看到出现了forum菜单,其实这个时候bbpress已经激活,但是在你的homepage上不一定能够被scan,这主要是theme主题的原因,不是所有的主题都能浏览到bbpress的内容,以下一并给大家提供两个theme拱大家调试bbpress,其实也可以在本站提供的theme基础上进行优化和嫁接。

    PS:至此,bbpress就被完美的整合到了wordpress中,共用户及数据,自由调用。

    完美支持bbpress的wordpress主题theme文件:

    ...READ MORE
  4. 如何消除wordpress超级链接下划线

    大家在使用wordpress不同的主题theme的时候,有的时候会发现对于超链接的下划线问题是这样的,有的theme里下划线是锦上添花的作用,尤其对于cms主题来说,但是对于追求个性化以及追求细节的作者来说,下划线有的时候是需要彻底删除的。对于下划线的编辑,其实只要打开主题的style.css文件,然后打开类似如下的代码:

    1. #footer a:hover {
    2. color: #00a0e9;
    3. text-decoration: underlin;   
    4. }

    然后替换为:

    1. #footer a:hover {
    2. color: #00a0e9;
    3. text-decoration: none;  
    4. }

    这样刷新页面就解决了超链接下划线的问题,同样的,以相反的方式可以添加下划线。这样你的theme是不是更加美观了 :twisted:

  5. WordPress优化之Ping功能设置

    现在百度当然是最大的搜索引擎了,所以为了提高检索,围着百度做一些工作还是非常有必要的。比如用百度的sitemap的插件等等,这样对于搜索引擎是非常友好的操作。

    另外其实对于wordpress这样的超级强大的博客系统来说,其实本身就已经内嵌了Ping功能,所以大家可以在设置里开启Ping 功能就可以了,这样对于搜索引擎是非常友好的。

    设置起来也是非常简单,开始点击去是这样的:

    ping1

    然后输入如下的Ping地址:

    1. http://rpc.pingomatic.com/
    2. http://ping.baidu.com/ping/RPC2
    3. http://blogsearch.google.com/ping/RPC2
    4. http://api.my.yahoo.com/RPC2
    5. http://api.my.yahoo.com/rss/ping
    6. http://www.feedsky.com/api/RPC2

    最后是这样的:

    ping2

    PS:简单设置,何乐而不为呢 :-)

  6. 彻底禁止wordpress4.6版本自动生成缩略图功能

           WordPress的每一次升级都是一次巨大的进步,当然了,在每一次升级的过程中,对于用户来说也是一次挣扎,因为很多调试好的插件或者功能可能会在新的函数里不再适用。比如对于Wordpress升级到了Wordpress 4.6版本以后,你如果去看看自己的根目录的uploads,会发现又偷偷的生成了很多缩略图了 :mrgreen:

            其实在旧版本中在设置界面就可以搞定缩略图的问题:

    thumbnail

            但是新版本的wordpress显然缩略图的大小已经不是原来的尺寸了,毕竟功能越来越强大了,于是可以通过在theme的function.php中添加如下代码注释掉执行函数就可以解决了,也就告别了缩略图的问题了。

    1. //彻底禁止WordPress缩略图

    2. add_filter( ‘add_image_size’, create_function( , ‘return 1;’ ) );

    PS:举一反三,即使以后wordpress更换了函数,同样的办法可以注释掉。

  7. WordPress4.6升级心得体会

    WordPress终于又有新动作了,随着google在国内的业务被越来越压缩,对于开源的wordpress来说,在加载google的各种服务以及font时,确实明显降低了国内的用户体验,这一次Wordpress升级,我特地留意了加载项,没有了wordpress4.5的自体加载困难现象,确实提升了用户体验,值得升级。

    Mark:就像中国女排,只有够强大,才能被尊重,希望使用Wordpress的国内用户越来越多,自然会有更好的用户体验。

    volleyball

  8. 为wordpress的文章页面添加”上一篇“和“下一篇”功能

    绝大多数的wordpress主题在文章的页面是包含了“上一篇”和“下一篇”的按钮的,该小细节极大的提高了用户体验。本站之主题由于没有内置该功能,所以只能自己添加,本站效果如下:

    PN

    其实可以通过两种方法实现:

    一、功能简单,但是非常实用,变化不多,提供上、下篇的题目以及链接地址,在需要在wordpress的主题根目录中的single.php的合适位置添加如下代码即可:

    1. <h4>
    2. <div class=“alignleft”><?php previous_post_link(‘&laquo; &laquo; %link’); ?></div>
    3. <div class=“alignright”><?php next_post_link(‘%link &raquo; &raquo; ‘); ?></div>
    4. </h4>

    二、功能稍复杂,可以通过CSS效果达到与wordpress主题更高的融合效果,并可以扩展到其他功能。

    1.在wordpress的主题根目录的function.php文件中添加如下调用代码:

    1. function st_prev_next_post() {
    2. $prev = get_previous_post();
    3. $next = get_next_post();
    4. $prev_link = $prev ? ‘<a class=“p tooltip” title=“‘ . __( ‘Previous’, ‘strictthemes’ ) . ‘” href=“‘ . get_permalink( $prev->ID ) . ‘”>’ . $prev->post_title . ‘</a>’ : ;
    5. $next_link = $next ? ‘<a class=“n tooltip” title=“‘ . __( ‘Next’, ‘strictthemes’ ) . ‘” href=“‘ . get_permalink( $next->ID ) . ‘”>’ . $next->post_title . ‘</a>’ : ;
    6. if ( $prev_link || $next_link ) {
    7. return ‘<div id=“pre_next_post”>’ . $prev_link . $next_link . ‘<div class=“clear”><!– –></div></div>’; }
    8. else {
    9. return; }
    10. }

    2.然后同样在wordpress的主题根目录中的single.php的合适位置添加如下代码:

    1. <?php
    2. echo st_prev_next_post();
    3. ?>

    3.以下是供大家参考的CSS,可以根据大家的喜好和主题实际情况修改。

    1. #pre_next_post {
    2. position: relative;
    3. font-size: 1.2em;
    4. line-height: inherit;
    5. margin: 2px 10 10;
    6. padding: 1.5em 50px;
    7. border-top: 1px solid rgba(0,0,0,0.1);
    8. border-bottom: 1px solid rgba(0,0,0,0.1);
    9. }
    10. .ie8 #pre_next_post {
    11. background: url(‘http://www.sky.gs/wp-content/themes/office/images/line-light.png’);
    12. }
    13. #pre_next_post:before {
    14. position: absolute;
    15. content: ;
    16. display: block;
    17. top: 0;
    18. left: 50%;
    19. background: rgba(0,0,0,0.1);
    20. width: 1px;
    21. height: 100%;
    22. }
    23. #pre_next_post a {
    24. position: relative;
    25. display: inline-block;
    26. max-width: 40%;
    27. }
    28. #pre_next_post a.p {
    29. float: left;
    30. }
    31. #pre_next_post a.n {
    32. float: right;
    33. text-align: right;
    34. }
    35. #pre_next_post .p:before,
    36. #pre_next_post .n:before {
    37. position: absolute;
    38. top: 0.25em;
    39. font-family: ‘StrictThemes’;
    40. font-size: 16px;
    41. speak: none;
    42. font-style: normal;
    43. font-weight: normal;
    44. font-variant: normal;
    45. text-transform: none;
    46. line-height: 1;
    47. color: rgba(0,0,0,0.3);
    48. width: 16px;
    49. height: 16px;
    50. -webkit-font-smoothing: antialiased;
    51. -moz-osx-font-smoothing: grayscale;
    52. }
    53. #pre_next_post .p:before {
    54. content: ‘\e60d’;
    55. left: -25px;
    56. }
    57. #pre_next_post .n:before {
    58. content: ‘\e688’;
    59. right: -25px;
    60. }

     

    ...READ MORE
  9. wordpress精简版jquery暗箱图片效果插件simple-colorbox

    很多暗箱插件都是动辄2M,而且功能繁琐,其实我们能用的最常见的就是图片放大功能,于是这个插件是不错的选择,大概约60kb,而且与主题很少有js冲突,难能可贵的是还提供4种暗箱效果选择。本插件在Wordpress 4.5.2下运行良好。

    1.下载插件simple-colorbox并激活插件,

    2.改插件因为非常精简,所以在选择效果的时候,需要手动更改,在插件的目录里plugins/simple-colorbox找到index.php,并用Dreamweaver找到如下代码:

    1. public function set_definitions() {
    2.         // Do definition check – used by themes/plugins to over-ride the default settings
    3.         if ( ! defined( ‘SIMPLECOLORBOX_OPACITY’ ) )
    4.             define( ‘SIMPLECOLORBOX_OPACITY’, ‘0.6‘ );
    5.         if ( ! defined( ‘SIMPLECOLORBOX_WIDTH’ ) )
    6.             define( ‘SIMPLECOLORBOX_WIDTH’, ‘95‘ );
    7.         if ( ! defined( ‘SIMPLECOLORBOX_HEIGHT’ ) )
    8.             define( ‘SIMPLECOLORBOX_HEIGHT’, ‘95‘ );
    9.         if ( ! defined( ‘SIMPLECOLORBOX_SLIDESHOW’ ) )
    10.             define( ‘SIMPLECOLORBOX_SLIDESHOW’, ‘group’ );
    11.         if ( ! defined( ‘SIMPLECOLORBOX_THEME’ ) )
    12.             define( ‘SIMPLECOLORBOX_THEME’, ‘1‘ );
    13.     }

    通过修改最后的数字选择1、2、3、4等的效果,所以具有良好的扩展性,可以手动添加更多的效果,而且支持多张图片幻灯播放效果。演示效果如下:

    jquery

    ...READ MORE
  10. wordpress网站中404页面同样重要

           大家一定有过这样的经历,随着一次次wordpress的搬家或者更新,总是会出现一些链接失效的现象,其实链接失效出现的空白页面对于SEO是非常不友好的,而且极大地降低了用户体验;于是404页面就是非常有必要了。

           网易、新浪、腾讯这类门户站的错误页面都是一样的,进入错误页面后提示5秒后返回频道首页。切忌不要进入404错误页面后,立刻返回首页,这些转向都使搜索引擎误以为页面存在,却返回重复内容。

    如下是本站的404页面,当然大家可以发挥自己的想象力充分发挥。

    404

    以下是404页面自动跳转回首页的代码:

    1. <meta http-equiv=“refresh” content=“5;url= https://www.sky.gs/ “>