分类: 博客

WordPress添加随机文章小工具

为排版需要,想把随机文章(random posts)小工具加到页脚,由于某些主题不自带,必须自己制作。本着尽可能不用插件的原则到网上搜了一下,有简单的办法,有复杂的办法,此文《为wordpress主题添加随机文章小工具》是比较方便快捷的,经实际体验,去除掉其中一些莫名其妙的格式和代码后把通用代码公布于众。

找到主题的functions.php,在?>之前添加如下代码:

//随机文章
class RandomPostWidget extends WP_Widget
{
	function RandomPostWidget()
	{
		parent::WP_Widget('bd_random_post_widget', '随机文章', array('description' => '我的随机文章小工具') );
	}
	function widget($args, $instance)
	{
		extract( $args );
		$title = apply_filters('widget_title',empty($instance['title']) ? '随机文章' :
		$instance['title'], $instance, $this->id_base);
		if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) )
	{
		$number = 10;
	}
	$r = new WP_Query(array('posts_per_page' => $number, 'no_found_rows' => true,'post_status' => 'publish', 'ignore_sticky_posts' => true, 'orderby' =>'rand'));
	if ($r->have_posts())
	{
		echo $before_widget;
		if ( $title ) echo $before_title . $title . $after_title;
?>
	<ul>
	<?php while ($r->have_posts()) : $r->the_post(); ?>
		<li>
			<a href="<?php the_permalink() ?>" title="<?php echo esc_attr(get_the_title() ? get_the_title() : get_the_ID()); ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?></a>
		</li>
	<?php endwhile; ?>
	</ul>
	<?php
	echo $after_widget;
	wp_reset_postdata();
	}
	}
function update($new_instance, $old_instance)
{
	$instance = $old_instance;
	$instance['title'] = strip_tags($new_instance['title']);
	$instance['number'] = (int) $new_instance['number'];
	return $instance;
}
function form($instance)
{
	$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
	$number = isset($instance['number']) ? absint($instance['number']) : 10;?>
	<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
	<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>

	<p><label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('文章显示数量:'); ?></label>
	<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
<?php
}
}
add_action('widgets_init', create_function('', 'return register_widget("RandomPostWidget");'));

the_excerpt()函数修改摘要字数并添加链接

Chun这个主题很美观大方,且用了比较高大上的themehybrid core,有些小缺憾也能通过简单的主题修改来完成。比如首页只显示55字的文章摘要,比较短,读者看到缩略文后的[…]也不知道点哪里(其实是点标题,但有人可能不知道),因此需要简单扩充function.php中the_excerpt()函数的功能。

//改变the_excerpt()函数显示的字数,默认为55
function emtx_excerpt_length( $length ) {
 return 55; //只要把55改为你需要的字数
}
add_filter( 'excerpt_length', 'emtx_excerpt_length' );

//给the_excerpt()函数的字符带上“全文”的链接
function emtx_continue_reading_link() {
 return ' <a href="'. get_permalink() . '">全文&raquo;</a>';
//如果想显示短链接,以上这句可以改写为:
//return ' <a href="'. wp_get_shortlink(get_the_ID())  . '">全文&raquo;</a>';
}
function emtx_auto_excerpt_more( $more ) {
 return ' [&hellip;]' . emtx_continue_reading_link();
}
add_filter( 'excerpt_more', 'emtx_auto_excerpt_more' );
 
function emtx_custom_excerpt_more( $output ) {
 if ( has_excerpt() && ! is_attachment() ) {
  $output .= emtx_continue_reading_link();
 }
 return $output;
}
add_filter( 'get_the_excerpt', 'emtx_custom_excerpt_more' );

当然,其实直接点标题是个更好的习惯,别的不说,至少标题字很大,也不需要移动鼠标太多,点起来很舒服嘛。总之,这段代码放在这里供参考。

为WordPress主题添加页脚小工具(footer widget)

某些主题不支持单列结构,小工具栏只能放在右侧,或者不少主题根本不带页脚小工具,常让包括我在内的强迫症患者烦恼不已!

改革方法如下:

1、在当前主题的functions.php文件里添加下面这段代码(三列):

// Register footer widgets
register_sidebar( array(
'name' => __( 'Footer Widget One', 'tto' ),
'id' => 'sidebar-4',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Left Side.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Footer Widget Two', 'tto' ),
'id' => 'sidebar-5',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Center.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

register_sidebar( array(
'name' => __( 'Footer Widget Three', 'tto' ),
'id' => 'sidebar-6',
'description' => __( 'Found at the bottom of every page (except 404s, optional homepage and full width) as the footer. Right Side.', 'tto' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );

2、在希望显示新widget的区域添加以下代码:

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' = 'Widgetized Area',
'id'   = 'widgetized-area',
'description'   ='This is a widgetized area.',
'before_widget' = '',
'after_widget'  = '',
'before_title'  = '',
'after_title'   = ''
));
}

上面的代码没有格式化,如果添加多个会导致乱七八糟。参考一些经典主题后,在footer.php处插入三列结构如下:

<?php
/* footer sidebar */
if ( ! is_404() ) : ?>
<div id="secondary" class="widget-area three">
<div id="left-sidebar">
<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-4' ); ?>
<?php endif; ?>
</div>

<div id="middle-sidebar">
<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-5' ); ?>
<?php endif; ?>
</div>

<div id="right-sidebar">
<?php if ( is_active_sidebar( 'sidebar-6' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-6' ); ?>
<?php endif; ?>
</div>

</div><!-- #footer-widgets -->
<?php endif; ?>

3、在style.css中定义格式:

#secondary{
width:100%;
clear:both;
}
//显示为三列,对电脑浏览器有效,对手机浏览器则展现为单列
@media only screen and (min-width: 600px) {
#left-sidebar{
float:left;
width:30%;
margin:30px 0 60px;
}
#middle-sidebar{
float:left;
width:30%;
margin:30px 0 60px 50px;
}
#right-sidebar{
float:right;
width:30%;
margin:30px 0 60px;
}}

4、完成!到后台小工具里添加你想添加的widget吧!

让图片自适应手机宽度

临睡前把iPhone充了电实验了一下在iOS的Safari中看travel.synyan.net的效果,发现图片撑破了主题,而字体过小,拥挤在左侧,绝壁给常用手机阅读鄙人博客的童鞋带来了不便。怎么解决呢,方法挺简单,找到子主题style.css中的img样式定义,然后加上max-width: 100%;height:auto;。比如Colorlib主题的CSS是这样的:

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image{
    max-width: 100%;
    height:auto;
}

不过据说IE不能正常解析max-width,回头有Windows Phone的童鞋帮我看一下。

移动写博的乐趣

从没有像现在这样,体验着移动设备写博的乐趣。这当然要感谢移动设备的大发展。十年前我买第一个3G板砖手机摩托罗拉A835的时候,那时写博是多么的困难,以至于要用短信发送到MSN信箱呢。后来又经历了诺基亚S40平台上蛋疼的wordpress ...

阅读更多

压缩博客图片文件

说起这个话题就有些大了,因为压缩WordPress的数据不是一两件事情,包括文件压缩、插件压缩、主题代码压缩、数据库压缩,等等。这里着重说的是文件压缩,更确切的说,是本站图片文件的压缩。当然图不多的无所谓,但对像我这样从MSN S...

阅读更多

来自丽江与巴厘岛的明信片

以前出差时常买些明信片给网友们寄去,当然网友们也会回赠,鼎盛时期半年能收到几十张世界各地的明信片。可惜换工作后出游大大减少,但朋友们还想着我,前一阵Ric便寄给我丽江的明信片,今天又意外的收到Jerry寄来的巴厘岛明信片(不...

阅读更多

WordPress缓存插件DB Cache Reloaded Fix+Hyper Cache

昨天在佐仔志的文章里看到推荐WordPress缓存插件DB Cache Reloaded Fix+Hyper Cache的组合,据作者评测比WP Super Cache更好。原文如下(有删增): WordPress 缓存插件推荐:DB Cache Reloaded Fix + Hyper Cache 组合1、WP Supe...

阅读更多

163外链相册

其实我本来是发这个帖子的: 创意太独到、太美了!今后考虑也拍一些类似的! 因为每幅都是gif图像,比较大,于是想找个相册放着,很自然的去了去年花38.8元订购的巴巴变相册上传,传完傻了,巴巴变只支持一个域名啊……要支持多...

阅读更多

1 8 9 10 11 12 29