整理一下主题八月折腾的细节

月底了,今年已经过去四分之三。感觉今年好象又什么也没做已经快过到头了。生活、工作也一如既往的波澜不惊、平淡如水;应酬方面同比往年少了一些,或许是今年刚刚发现一个新玩具,博客!

之前虽然说过现在基本不怎么折腾主题,但发现晚上偶尔不想看书、不看电视的时候变的无事可做。好吧,那就接着折腾…

文章ID修改

最近发现发布文章之前总喜欢预览看下效果,结果导致博客ID数字不断变大,最后已经破千,实际文章除了图片、附件等不到100篇。看着ID数字不停变大,发现看看越难受,我这算是强迫症吗?

自建博客至现在也有几个月,百度收录200多。虽然这次重整对SEO不太好,但无所谓啦。要不然以后时间长了,更难受,所以为了以后不难受,这次把以前文章全部ID全部重排。

同样在逛其他人博客的时候很多博客同样存在这个问题,还发现一个文章没几个,但是ID已经破万的,这是要多能折腾才增加这么多…

PS:这里注明一点,因为不是当天查到的资料,所以下面代码原作者是谁,我忘了!!!

方法一

以下代码添加至 functions.php 中。这样如果只是单纯发文章,不发页面,不添加菜单,不上传媒体的话,基本上此后的文章ID是连续的,而且不改变之前已经发布的文章ID,不影响SEO;

//重新排列不连续的文章ID 
function keep_id_continuous(){
global $wpdb;
$lastID = $wpdb->get_var("SELECT ID FROM $wpdb->posts WHERE post_status = 'publish' OR post_status = 'draft' OR post_status = 'private' OR ( post_status = 'inherit' AND post_type = 'attachment' ) ORDER BY ID DESC LIMIT 1");
$wpdb->query("DELETE FROM $wpdb->posts WHERE ( post_status = 'auto-draft' OR ( post_status = 'inherit' AND post_type = 'revision' ) ) AND ID > $lastID");
$wpdb->query("ALTER TABLE $wpdb->posts AUTO_INCREMENT = 1");}
// 将函数钩在新建文章、上传媒体和自定义菜单之前。
add_filter( 'load-post-new.php', 'keep_id_continuous' );
add_filter( 'load-media-new.php', 'keep_id_continuous' );
add_filter( 'load-nav-menus.php', 'keep_id_continuous' );
//移除自动保存
wp_deregister_script('autosave');
//移除修订版本
remove_action('post_updated','wp_save_post_revision' );

方法二

添加以上代码,基本上可以保证以后发布的文章ID都会是连续的了,但是之前已经发布的文章ID还是并没有变化,得把他们重新排列,以保证是ID是从1开始连续的。

这里一个PHP脚本 点击下载,下载后解压将该PHP文件上传至你的博客空间,运行一下看到 OK 就可以了,你可以到phpmyadmin中查看wp_posts表中的id是不是连续的了。

特别提醒:开始之前请先备份你的数据库。(如果你使用了post id作为固定链接,那么将可能改变所有文章的网址,会影响搜索引擎收录;如果你用的插件建立了新的数据库表,如投票插件等,也将会出现问题;如果你的博客中创建了父子关系的页面,运行了以下脚本将会失去此关系。请慎用!)

后台登录地址更改

建站时间长了总有各种无聊的人来破解网站密码的,之前我也发过一篇文章说过这事,当时主要装了一款插件限制IP登陆。插件名:Limit Login Attempts 有兴趣的可以直接后台插件搜索安装研究一下

后来在 @不亦乐乎 看到也有类似的破解网站密码,另外一种通过 functions.php 添加代码来解决 wp-login.php 暴力破解登录名密码的方法:

//保护后台登录
function login_protection(){  
    if($_GET['ox'] != 'yes') header('Location: http://emuia.com/');  
}
add_action('login_enqueue_scripts','login_protection');  

加入以上代码后,直接访问 wp-login.php 将跳到首页,正确的访问地址是 wp-login.php?ox=yes,其中的 ox 和 yes 可以改为你自己喜欢的。

七牛加速

此前博客图床完全迁移至七牛,但后来用时发现图片打开速度不是很理想,想到可以用七牛的CDN加速解决此问题。

问了度娘,结果不是装插件就是直接加速域名!插件不想装,加速域名需交10元。我当时申请七牛的账号比较早,七牛改版之前自定义域名是不需要交10元费用,现在为这个再花10元感觉完全没必要。

往 functions.php 添加代码可同样实现相应功能。又省了10元…..

// 七牛CDN加速图片代码版
function QiNiuCDN(){
    function Rewrite_URI($html){
        /* 前面是需要用到七牛的域名,后面是需要加速的静态文件类型,使用分隔符 | 隔开即可 */
        $pattern ='/http:\/\/(\.|)emuia\.com\/wp-([^"\']*?)\.(png|jpg|jpeg|gif|bmp)/i';
        /* 七牛CDN空间地址,请自行替换成实际空间地址 */
        $replacement = 'http://emuia.com/wp-content/uploads/wp-$2.$3';
	$html = preg_replace($pattern, $replacement,$html);
	return $html;
	}
    if(!is_admin()){
        ob_start("Rewrite_URI");
    }
}
add_action('init', 'QiNiuCDN');

代码高亮

因为本博客并不是技术性博客,贴代码的时候并算太多,为此特意装一个插件就有点小题大作,因此通过定义CSS样式,达到类似的效果。

使用方法也很简单,只需在文本模式下使用< pre>标签包裹代码即可实现。代码中所需图片下载: 点击下载 右键另存为

/**代码高亮**/
pre {
    font: 12px/20px Menlo,Monaco,Consolas,"Courier New",monospace;
    color: #2D8284;
    background: url(images/pre.png) repeat top;
    padding: 20px;
    margin: 0px;
    border: 1px solid #ddd;
    border-left: 3px solid #2D8284;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    overflow-y: hidden;
}

禁止代码html转义

注意:文中第4行中< pre>标签中的空格记得删掉。此代码引用作者 @NYUN

将如下代码添加到主题functions.php文件即可:

// 禁止代码html转义
add_filter( 'the_content', 'pre_content_filter', 0 );
function pre_content_filter( $content ) {
    return preg_replace_callback( '|< pre.*>(.*)< /pre|isU' , 'convert_pre_entities', $content );
}
function convert_pre_entities( $matches ) {
    return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}

h3标题样式

原来的那个有点看腻歪了,换了一种效果。上面的这个就是。你们看效果和原来的哪种好?

.hentry h3 {font-size:20px;line-height:90px;color:#aaa;display:table;white-space:nowrap;border-spacing:20px 0}
.hentry h3:before,.hentry h3:after{content:"";display:table-cell;width:50%;background:-webkit-linear-gradient(#eee,#eee) repeat-x left center;background:-moz-linear-gradient(#eee,#eee) repeat-x left center;background:-ms-linear-gradient(#eee,#eee) repeat-x left center;background:linear-gradient(#eee,#eee) repeat-x left center;background-size:1px 1px}

JS网页背景特效

最近不少朋友留言说网站背景效果不错。这里给大家也分享一下,有需要的可以下载研究试下 点击下载

下载解压得到一个 canvas-nest.js-master 文件夹,直接上传你主题的JS目录里。然后在 header.php 文件的 < boby>之间< /boby> 引用此JS文件。

路径跟据自己的情况修改,如果需要修改线条样式、个数、速度等数据,可以在下载文件内修改,已经添加过注释。。。

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/canvas-nest.js-master/canvas-nest.min.js" ></script>

目录索引

刚接触WP的时候见过这种插件,但我还是保持我原有的态度,能少用插件就少用,尽量集成到主题。

1、在主题的函数模板functions.php文件里添加如下代码

//目录索引
    function article_index($content) {
        $matches = array();
        $ul_li = '';
        $r = "/<h3>([^<]+)<\/h3>/im";
        if (preg_match_all($r, $content, $matches) && is_single()) {
            foreach ($matches[1] as $num => $title) {
                $content = str_replace($matches[0][$num], '<h3 id="title-' . $num . '">' . $title . '</h3>', $content);
                $ul_li .= '<li><a href="#title-' . $num . '" title="' . $title . '">' . $title . "</a></li>\n";
            }
            $content = "\n<div id=\"article-index\">
 <b>[文章目录]</b>
 <ul id=\"index-ul\">\n" . $ul_li . "</ul>
 </div>\n" . $content;
        }
        return $content;
    }
    add_filter("the_content", "article_index");

其中h3标签可根据自己需求更改。特别提示:此代码仅支持单级目录。

使用方法:在编辑文章的时候,切换到HTML模式,将需要添加到目录中的标题用< h3>和< /h3>括起来就可以了,如< h3>我是索引标题< /h3>。当然你也可以用其他标签,如< h4>、< h5>等

2、有了代码,美化也是很重要的。你可以自己写CSS,也可以用本站提供的样式。将以下css代码放到主题目录下的style.css中就可以了

/*目录索引*/
#article-index {background: #f8f8f8;float: right;width: auto;max-width: 270px;margin-left: 10px;z-index: 2;position: relative;}
#article-index b {display: block;line-height: 30px;padding: 0 15px;}
#index-ul {margin: 5px;line-height: 1.8;}
#index-ul li {list-style-type: decimal;padding: 4px 10px;color: #fe9600;}
#index-ul li a{color: #494949;font-size: 14px;}

结语

整理的有些乱,毕竟不是技术性博客,所以这些调整每一个也没有做单独文章发布出来,直接这样归纳在一起。如果有特殊需要再单独开篇说明。

差不多这些吧。如果有漏点哪个,之后再另行补充上来。

2016.09.01 补充 —— 应博友需求,新加一项“目录索引”代码及样式

2016.09.02 补充 —— 禁止代码html转义


0 0 投票数
文章评分
订阅评论
提醒
guest

68 评论
内联反馈
查看所有评论
Vance
7 年 前

哈哈背景是挺好看的,但是手机端看起来给人的感觉好坏,文章都看的不安分了。博主你试试 😎

何炜
7 年 前
回复给  弋牧

@弋牧 可以用
if( /Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))
{}else{}
这个在手机中不显示背景的特效 😳

Vance
7 年 前
回复给  弋牧

@弋牧 WTF,不过这在这篇文章拿到的东西不少,以后多发一点 💡

Vance
7 年 前
回复给  弋牧

@弋牧 最后问一这个博客的相册是怎样实现的