萧涵主题添加阅读全文按钮并符合SEO优化

在wordpress萧涵主题添加首页文章摘要右下角阅读全文按钮通过传统手动方式并不能成功,而且手动方式太复杂,需要每次编辑文章都手动添加。偶看在这里介绍通过修改代码实现一劳永逸的自动方式。

传统手动添加方式

发表或编辑文章,在想要显示“继续阅读”按钮处,单击编辑框中第一行第12个按钮【插入“更多”分隔符(ALT+SHIFT+T)】,即可插入一个“继续阅读”按钮。具体代码为:

<!--more-->

wordpress阅读全文按钮

这个方式不适用于wordpress萧涵主题,遂采用以下办法。

修改代码自动显示方式

一、打开萧涵主题文件夹下的index.php文件,找到

				<div class="intro">
 					<?php if(is_category() || is_archive() || is_home() ) {
 						the_excerpt();
 						} else {
 							the_content('Read the rest of this entry &raquo;'); 
 					} 
 					?>
 				</div>

在以上代码后面添加

<div class="goon"><a href="<?php the_permalink() ?>" rel="nofollow">阅读全文</a></div>

二、打开萧涵主题文件夹下的style.css文件,在结尾处添加CSS代码

 .post .goon a{float:right;margin-right:15px;color:#F60;font-family:'Microsoft Yahei',Arial;font-size:14px;}

三、添加“阅读全文”按钮后的首页显示效果

萧涵主题添加阅读全文按钮

给“阅读全文”按钮添加nofollow属性是一个SEO优化细节。如果您的文章锚文本都是“阅读全文”,而又指向不同的网页,那么搜索引擎将无法确定您的文章主旨。当然,为“阅读全文”按钮添加nofollow属性还有其他几个好处,偶看就不一一说明了。

萧涵主题文章缩略图实现方法

萧涵主题文章缩略图,偶看目前还没有需要用到,但是有朋友问起,通过一番搜索和研究,实现萧涵主题文章缩略图,需要三步即可。

注意:以下方法不适用于《萧涵主题置顶摘要和全文显示的方法》后的修改。

一、在主题文件夹下的functions.php添加代码

//文章缩略图获取
 function dm_the_thumbnail() {  
     global $post;  
     if ( has_post_thumbnail() ) {  
         echo '<a href="'.get_permalink().'" class="pic">'; 
         $domsxe = simplexml_load_string(get_the_post_thumbnail());
         $thumbnailsrc = $domsxe->attributes()->src;  
         echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';
         echo '</a>';  
     } else {
         $content = $post->post_content;  
         preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);  
         $n = count($strResult[1]); 
         $random = mt_rand(1, 5);
         if($n > 0){
             echo '<a href="'.get_permalink().'" class="pic"><img src="'.$strResult[1][0].'" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';  
         }else {
             echo '<a href="'.get_permalink().'" class="pic"><img src="'.get_bloginfo('template_url').'/images/random/oukan'.$random.'.jpg" alt="'.get_the_title().'" title="'.get_the_title().'"/></a>';  
         }  
     }  
 }
 add_theme_support('post-thumbnails');
 set_post_thumbnail_size(100, 140, true); 

二、在主题文件index.php;category.php;archive.php里面的

<div class="intro">

后面添加以下代码:

<?php dm_the_thumbnail(); ?>

三、将如下css代码添加到主题文件style.css。

.post .intro img {
     float:left;
     width:140px;
     height:100px;
     margin:12px 10px 8px 15px;
     padding:4px;
     border:1px solid #ccc;
     position:relative;
     z-index:3;
 }

萧涵主题缩略图显示效果

萧涵主题缩略图显示效果

以上三个步骤修改添加完成后,即可显示首页、栏目页和归档页面文章右边的缩略图,图片大小为100*140像素,默认调用文章内的第一张图片,如果文章内没有图片,就会调用主题包里images文件夹下的random(这个文件夹自己手动建立)里面的图片,例如:oukan1.jpg,oukan2.jpg……oukan5.jpg(缩略图命名的格式必须照此来)。

您的wordpress萧涵主题还有更多需要修改的地方,请查看萧涵主题修改全记录

情侣博客主题Sweet-Clouds修改支持菜单功能

爱林家园情侣博客,使用的模板是Sweet-Clouds,这个模板偶看很喜欢,付费购买非常值得。偶看是个爱折腾的,在对Sweet-Clouds模板的使用中发现,这个情侣模板不支持菜单功能,只能调用页面。

通过查看源代码发现,是调用函数的问题,由于Sweet-Clouds模板的导航条不是在head.php,修改导航条需要更改的文件有index.php、404.php、archive.php、page.php、search.php、single.php,千万不要被这么多文件名吓到了,只要使用dreamweaver的替换功能,几秒钟就搞定了。

先将Sweet-Clouds模板文件夹设置为站点,打开dreamweaver的替换功能,查找访问选择“当前整个本地站点”,搜索“源代码”

        <ul>
          <li><a title="首页" href="<?php bloginfo( 'url' ); ?>" >首页</a></li>
          <?php  wp_list_pages('depth=1&title_li=0&sort_column=menu_order&sort_order=ASC');?>
        </ul>

替换成

        <?php wp_nav_menu('container=\'\'&menu_id=menu&title_li=&link_before=<span>&link_after=</span>'); ?>

目前爱林家园情侣博客使用的wordpress版本是3.4.2,完美兼容!

想要让自己的wordpress主题实现支持菜单功能也是修改这个调用函数的,是不是很简单呢?支持菜单功能我们才会有更大的自主权!

将萧涵主题的置顶文章前的置顶两个字去掉

使用wordpress的萧涵主题置顶文章前会显示“置顶”两个字,这两个字是为了与其他文章区分开来的,而有很多朋友并不想突出“置顶”这两个字,而要去掉它。

打开模板主题下的index.php文件,找到代码

<h2>[置顶] <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

将“[置顶]”这几个字删除几个。

这个方法对于大部分的wordpress主题都是适用的,而不是单单只适用于萧涵主题,因为只需要找出“置顶”两个字,并删除。

您的wordpress主题还有更多需要修改的地方,请查看萧涵主题修改全记录

萧涵主题修改友情链接为随机排列

偶看在使用萧涵主题一段时间后发现,友情链接的排列是固定不变的,感觉没有点新意,偶看觉得还是要把网络营销方法的友情链接排列改成随机的。

wordpress的友情链接标签功能强大,而萧涵主题只使用了最基本的功能

以下修改基于wordpress3.4.1修改,打开模板文件夹下的sidebar.php,找到代码

<?php wp_list_bookmarks('title_li=&categorize=0'); ?>

修改成

<?php get_links(-1, '<li>', '</li>', '', 0, 'rand', 0, 0, 30); ?>

即可实现友情链接的随机排序,这个标签的具体参数,偶看就不详细阐述了,想要进一步了解的朋友可以去搜索wordpress友情链接参数和函数详解,萧涵主题3.0已经将友情链接按照两列排列,就不需要再修改CSS。

还有更多需要修改的地方,查看萧涵主题修改全记录

萧涵主题修改全记录

偶看自从将偶看网络营销博客改版成Wordpress博客后,就开始使用萧涵主题,到现在使用萧涵主题已经有两个多月了,期间修改了多处设置,在这里给大家做个导航,方便查找!

如有问题可以在偶看网络营销问答中提问,或直接在博客中留言。
萧涵主题修改全记录

本地搭建wordpress (wordpress视频教程一)

wordpress基本设置 (wordpress视频教程二) 内含萧涵主题和图片源文件下载地址

萧涵主题不同颜色源码下载(蓝色、红色、紫色和绿色)

林伟强:wordpress利于SEO优化的十三个插件

整体修改

一、安装萧涵主题后出现错误

二、取消WP的自动保存和草稿功能

三、WordPress英文垃圾评论

四、WordPress图片防盗链

模板页面修改

一、萧涵主题的导航栏栏间距修改

二。萧涵主题修改右上角banner为广告代码

三、将萧涵主题的置顶文章前的置顶两个字去掉

四、萧涵主题文章缩略图实现方法  萧涵主题修改首页缩略图显示详解视频

五、萧涵主题添加幻灯片插件WP flash img show(含视频)

六、萧涵主题置顶摘要和全文显示的方法

七、萧涵主题添加阅读全文按钮并符合SEO优化

八、萧涵主题模版将comments修改成评论

九、萧涵主题删除导航条RSS订阅按钮

十、萧涵主题LOGO修改(含视频)

十一、wordpress wp-postviews统计插件安装使用教程(含视频)

十二、萧涵博客修改默认分享为百度分享

十三、萧涵模板更换网页背景图

十四、wordpress无觅相关文章插件 安装使用视频教程

十五、萧涵主题如何设置微博客(含视频)

十六、萧涵主题右上角添加设为首页、收藏网站等链接

侧边栏修改

一、萧涵模板非插件侧边栏显示Gravatar头像最新评论(含视频)

二、萧涵模板修改热评文章调用周期为近一年

三、萧涵主题修改友情链接为随机排列

四、萧涵SEO模版添加侧边栏博主图片和介绍(含视频)

五、萧涵博客分类目录双排显示

六、wordpress侧边栏添加微博收听组件和微博秀(含视频)

七、萧涵主题侧边栏错位解决办法(含视频

    偶看建立了关于萧涵主题修改交流的QQ群:已经解散,大家有问题可以在“偶看问答”提问。

目前,偶看使用的萧涵主题适用于WordPress3.4.1,2012年9月7号升级WordPress3.4.2,12月19日升级到WordPress3.5。
2013年1月25日升级到WordPress3.5.1,6月22日升级到对WordPress3.5.2,9月2升级到WordPress3.6,9月13升级到WordPress3.6.1,新版本WordPress的使用没有问题。(最后修改于2013年9月13日)

情侣博客Sweet-Clouds模板修改读者墙

偶看在前一段时间把情侣博客公开了,使用并优化Sweet-Clouds情侣博客模板

今天,偶看对情侣博客其中的一个内页进行检测时发现有三个站外链接。查看源代码发现这些站外链接是读者墙导出的,而这个读者墙的位置处于每个内容页文章与评论中间,从优化的角度来说有点不红,偶看认为还是把这个功能去掉好些,有机会的时候单独建立一个读者墙页面。毕竟现情侣博客的访客不多,评论或留言的访客就更少了,老是这几个链接挂在每个页面也不太合适。

读者墙

打开Sweet-Clouds情侣模板的comments.php文件,从第一行到第十五行

<div id="scrollbox">
  <?php $query="SELECT COUNT(comment_ID) AS cnt, comment_author, comment_author_url, comment_author_email FROM (SELECT * FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->posts.ID=$wpdb->comments.comment_post_ID) WHERE comment_date > date_sub( NOW(), INTERVAL 1 YEAR ) AND user_id='0' AND comment_author_email != 'oukan.net' AND comment_author_email != 'oukan.net' AND post_password='' AND comment_approved='1' AND comment_type='') AS tempcmt GROUP BY comment_author_email ORDER BY cnt DESC LIMIT 13";
$wall = $wpdb->get_results($query);
foreach ($wall as $comment)
{
if( $comment->comment_author_url )
$url = $comment->comment_author_url;
else $url="#";
$tmp = "<li><a rel='external nofollow' href='".$url."' title='".$comment->comment_author." (".$comment->cnt.")'>".get_avatar($comment->comment_author_email, 40)."</a></li>";
$output .= $tmp;
}
$output = "<ul>".$output."</ul>";
echo $output ;
?>
</div> 

全部删除,这样每个内容页文章与评论中间的读者墙就被删除了。

如果以后情侣博客的访客留言能够多起来,再恢复这个功能吧。

萧涵主题修改右上角banner为广告代码

偶看使用萧涵主题有一段时间了,右上角banner的图片位需要好好利用起来,如果只是放置一张图片,这个位置就有点可惜了。在wordpress后台的主题设置中没有直接能将图片修改成广告联盟代码的功能,那么只能修改模板文件了。

打开header.php,第65行到第81行

             <div class=”banner”><?php
     // Check if this is a post or page, if it has a thumbnail, and if it’s a big one
     $options = get_option(‘xiaohan_options’);
     $banner_link = $options[‘banner_link’];
     $banner_link_target = $options[‘banner_link_target’];
     $banner_link_xfn = $options[‘banner_link_xfn’];
     if ( is_singular() &&
       has_post_thumbnail( $post->ID ) &&
       ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnail’ ) ) &&
       $image[1] >= HEADER_IMAGE_WIDTH ) :
      // Houston, we have a new header image!
      echo get_the_post_thumbnail( $post->ID, ‘post-thumbnail’ );
     else : ?>
                   
      <a href=”<?php echo $banner_link;?>”<?php if($banner_link_target==1) echo ‘ target=”_blank”’; ?><?php if($banner_link_xfn==1) echo ‘ rel=”nofollow”’; ?>><img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” /></a>
     <?php endif; ?>
            </div>

萧涵主题修改右上角banner为广告代码

在 <div class=”banner”>广告代码</div>的中间的所有内容替换成您在广告联盟(推荐百度联盟、谷歌联盟和阿里妈妈等)申请的广告代码即可,注意广告大小为468*60。

这样萧涵主题右上角banner就变成了广告!具体可以查看互联网那些事的效果。

点击查看萧涵主题修改全记录

融王子博客修改完成

融王子网站新界面

融王子的博客(http://www.princerong.com/)已经好久没有更新了,上次修改模板还是2011年6月12日>>融王子博客更换新模板,整整一年多前啊!

由于融王子博客原来的程序是Oblog的属于ASP程序。Oblog已经停止开发很久了,适用于小朋友的模板很少,上个bee的模板还是从Wordpress中迁移过去了。为了让博客跟上时代的步伐,最近几天我将Oblog的数据都迁移到了Wordpress,有了上次网站数据迁移的经验,这次的数据转换还算顺利,而且数据不多,修改起来也比较容易。

这次融王子博客使用的主题是NintendoGames,由于是英文版的,我将部分关键文字汉化了,使用的是UTF-8编码。

针对这个主题出了汉化之外,主要的修改有:

一、添加评论表情,使用代码,

二、修改网站整体字体为微软雅黑,

三、添加Faster Image Insert、Google XML Sitemaps、NextGEN Gallery、SEO Friendly Images、TinyMCE Xiami Music、WP-PostViews、WP No Category Base – WPML compatible等插件,因为融王子的博客以图片为主,所以图片相关插件比较多,

四、小工具的添加

目前网站还在不断完善之中,细节部分需要继续修改。

PJblog修改搜索关键字的长度

最近开始尝试使用PJblog,在对PJblog的搜索框进行测试的时候,系统提示“关键字不能少于3个字”

需要修改“模块”

管理后台——界面与插件——设置模块,选择模块标识“Search”——编辑HTML

第一行

<form style="MARGIN: 0px" onsubmit="if (this.SearchContent.value.length<3) {alert(‘关键字不能少于3个字’);this.SearchContent.focus();return false}" action="search.asp">

将两个“3”修改为想要的数字,修改后

<form style="MARGIN: 0px" onsubmit="if (this.SearchContent.value.length<2) {alert(‘关键字不能少于2个字’);this.SearchContent.focus();return false}" action="search.asp">
    关键字 <input class="userpass" name="SearchContent"/>
    <div style="OVERFLOW: hidden; HEIGHT: 3px"> </div>
    类 型 <select name="searchType">
    <option value="title" selected="selected">日志标题</option>
    <option value="Content">日志内容</option>
    <option value="Comments">日志评论</option>
    <option value="trackback">引用通告</option>
    </select> <input class="userbutton" type="submit" value="查 找"/>
</form>

屏蔽oblog日志评论的“删除”和“回复”项

依据版本:oblog 4.60 Final Build080827(ACCESS)

谷歌的“网站管理员工具”将日志评论中的“删除”和“回复”的链接归类为“找不到(404)”不知道这是为何,而且该链接还不少。

因为该页面为静态页面,比较好的解决方法就是在代码处屏蔽这两个项目的链接。

一、打开inc/class_blog.asp 第312-313行

     show_more = show_more & ” | <a href=””” & blogurl & “user_comments.asp?action=del&id=” & commentid & “””  target=””_blank””>删除</a>”
     show_more = show_more & ” | <a href=””” & blogurl & “user_comments.asp?action=modify&re=true&id=” & commentid & “””  target=””_blank””>回复</a>”

改为

     ‘show_more = show_more & ” | <a href=””” & blogurl & “user_comments.asp?action=del&id=” & commentid & “””  target=””_blank””>删除</a>”
     ‘show_more = show_more & ” | <a href=””” & blogurl & “user_comments.asp?action=modify&re=true&id=” & commentid & “””  target=””_blank””>回复</a>”

在行首添加符号“’”注释该代码即可。

二、效果图

修改前

修改后

oblog用户主模板标记调用字数的修改

依据版本:oblog 4.60 Final Build080827 (ACCESS)

博客的最新评论调用的字数多了些,导致出现换行,在不修改模板的前提下,需要减少该标签调用的字数,因为其他模板所留的位置可能也不够,减少调用字数才是最终的解决方法。

查看标签说明,用户主模板的标签没有修改调用字数的功能。

需要修改源代码,打开inc/class_blog.asp 第837行

   show=show&”<li><a href=”””&log_truepath&rs(“logfile”)&”#”&rs(“commentid”)&””” title=”””&oblog.filt_html(rs(“comment_user”))&”发表于”&rs(“addtime”)&”””>”&oblog.filt_html(left(rs(“commenttopic”),18))&”</a></li>”& vbcrlf

修改为

   show=show&”<li><a href=”””&log_truepath&rs(“logfile”)&”#”&rs(“commentid”)&””” title=”””&oblog.filt_html(rs(“comment_user”))&”发表于”&rs(“addtime”)&”””>”&oblog.filt_html(left(rs(“commenttopic”),16))&”</a></li>”& vbcrlf

即可。

其他几个标签的调用字数修改方法与上述一致。

修改网站系统副模板

偶看使用oblog程序改成个人博客,网站的系统模板一直没有派上用场,以前的功能只有转向,现在给系统副模板一些展示的机会。

使用/list.asp显示全部日志,其他如图片(/photo.asp)和标签(/tags.asp)等功能因为权限配置有缺陷,将这些页面删除。

无法在list页面上直接调用“热门日志”,使用JS调用。

照片被隐藏

在Oblog升级后,对加密全站的照片浏览权限进行修改,但是其修改结果是博客主人也无法查看照片,在相册中显示照片数为零,用户后台也无法管理,只能在文件管理中查看该文件,因此我们需要恢复原样。

修改方法:打开数据库——表:oblog_Album——字段:IsHide,将数字“2”改成“0”即可。

偶看个人博客CSS修改


 

为了让网页排版更加美观,今天修改了网页的首行缩进,直接修改CSS文件,实现了全部的修改,但是,以前的文章有很多都是空了四格的,只要修改数据库。打开数据库,将“&nbsp;”全部替换为空,但是这样替换还有个问题,就是会留出空格。看来要一篇篇改了!

span.oblog_text { font-family: cursive; font-size: 13pt; word-spacing: 0; line-height: 150%; text-indent: 36; letter-spacing: 1pt; margin: 0 } .oblog_text a:link{ color:#FF0000; text-decoration:none} .oblog_text a:visited{color:#FFCC00; text-decoration:none;} .oblog_text a:hover {color:#FFCC00; text-decoration:underline;}