分类目录归档:WP技巧

分享一些有用的wordpress技巧、方法。

WordPress 插件:WordPress 同步微博

banner-1544x500

插件说明

wp2wb 将你的 WordPress 网站与新浪微博关联,在发布文章时自动将文章同步发布到新浪微博,并且可以选择以普通微博方式发布或者头条文章方式发布。

使用 wp2wb 需要先在 新浪开放平台 创建网站网页应用。

插件下载

安装插件

  1. 下载插件 zip 压缩包,解压并上传到网站 /wp-content/plugins 目录,或者通过在 插件中心 在线下载安装
  2. 插件->已安装的插件 中激活插件
  3. 设置->同步微博设置 中按相关提示设置插件。

阅读全文

链接

为WordPress添加一个切换标签插件

create-tabber-widget-splash

如果你的 WordPress 博客中有使用侧边栏(Sidebar),并且你的侧边栏模块又不只一个,那么我想你一定会想到使用可切换的标签将侧边栏中同类的模块整合在一起,这样可以使侧边栏的空间得到最有效的利用,同时也可以让你的主题更加高端、大气。

下面这篇文章中就介绍来实现切换标签的方法,跟着它一步一步来做吧!

教程链接:How To Create A Tab Widget In WordPress

WordPress技巧:实现像Dribbble一样的分页样式

paginate-wordpress-like-dribbble

相信很多人都知道 Dribbble 吧?和某8相比,这才是真正神奇的网站。

在Dribbble中查看某个作品页面时,在页面的右边栏上会以缩略图的形式显示同一作者的前一个作品和后一个作品,这样的导航方式是不是很赞?下面这段代码就可以将这种分页方式移植到WordPress博客中。

<?php $prev = get_previous_post(); $next = get_next_post(); ?>

<div class="float--left folio">
    <a href="<?php echo get_permalink($prev->ID); ?>" title="<?php echo esc_attr($prev->post_title); ?>">
        <?php echo get_the_post_thumbnail($prev->ID, 'thumbnail'); ?>
    </a>
</div>

<div class="float--right folio">
    <a href="<?php echo get_permalink($next->ID); ?>" title="<?php echo esc_attr($next->post_title); ?>">
        <?php echo get_the_post_thumbnail($next->ID, 'thumbnail'); ?>
    </a>
</div>

将上面的代码粘贴到主题目录下single.php文件中你希望它出现的位置,就万事大吉了!

以上代码摘自Square One

如何从 Google CDN 加载 jQuery

how-to-load-jquery-from-google-cdn

默认情况下,WordPress 在主题中会调用系统自带 jQuery 库,但是如果直接从 Google CDN 加载 jQuery 该如何做呢?下面这个简单的方法就可以轻松实现。

将下面的代码粘贴到主题的 functions.php 文件中:

function jquery_cdn() {
   if (!is_admin()) {
      wp_deregister_script('jquery');
      wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js', false, '1.8.3');
      wp_enqueue_script('jquery');
   }
}
add_action('init', 'jquery_cdn');

OK!搞定,就是这样简单:)!

代码摘自 wptips.ru

WordPress技巧:非插件实现高效SEO

efficient-seo-without-a-plugin

很多时候为了博客能够更好地被搜索引擎抓取,我们需要做一些SEO方面的优化。当然,有很多插件可以帮助我们来实现,但是如果不想使用插件,这里有一个简单的代码实现的方式,可以使你的博客对搜索引擎更加友好。

首先,将下面的代码粘贴到主题 functions.php 文件中。

function basic_wp_seo() {
    global $page, $paged, $post;
    $default_keywords = 'wordpress, plugins, themes, design, dev, development, security, htaccess, apache, php, sql, html, css, jquery, javascript, tutorials'; // customize
    $output = '';

    // description
    $seo_desc = get_post_meta($post->ID, 'mm_seo_desc', true);
    $description = get_bloginfo('description', 'display');
    $pagedata = get_post($post->ID);
    if (is_singular()) {
        if (!empty($seo_desc)) {
            $content = $seo_desc;
        } else if (!empty($pagedata)) {
            $content = apply_filters('the_excerpt_rss', $pagedata->post_content);
            $content = substr(trim(strip_tags($content)), 0, 155);
            $content = preg_replace('#\n#', ' ', $content);
            $content = preg_replace('#\s{2,}#', ' ', $content);
            $content = trim($content);
        } 
    } else {
        $content = $description;    
    }
    $output .= '<meta name="description" content="' . esc_attr($content) . '">' . "\n";

    // keywords
    $keys = get_post_meta($post->ID, 'mm_seo_keywords', true);
    $cats = get_the_category();
    $tags = get_the_tags();
    if (empty($keys)) {
        if (!empty($cats)) foreach($cats as $cat) $keys .= $cat->name . ', ';
        if (!empty($tags)) foreach($tags as $tag) $keys .= $tag->name . ', ';
        $keys .= $default_keywords;
    }
    $output .= "\t\t" . '<meta name="keywords" content="' . esc_attr($keys) . '">' . "\n";

    // robots
    if (is_category() || is_tag()) {
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
        if ($paged > 1) {
            $output .=  "\t\t" . '<meta name="robots" content="noindex,follow">' . "\n";
        } else {
            $output .=  "\t\t" . '<meta name="robots" content="index,follow">' . "\n";
        }
    } else if (is_home() || is_singular()) {
        $output .=  "\t\t" . '<meta name="robots" content="index,follow">' . "\n";
    } else {
        $output .= "\t\t" . '<meta name="robots" content="noindex,follow">' . "\n";
    }

    // title
    $title_custom = get_post_meta($post->ID, 'mm_seo_title', true);
    $url = ltrim(esc_url($_SERVER['REQUEST_URI']), '/');
    $name = get_bloginfo('name', 'display');
    $title = trim(wp_title('', false));
    $cat = single_cat_title('', false);
    $tag = single_tag_title('', false);
    $search = get_search_query();

    if (!empty($title_custom)) $title = $title_custom;
    if ($paged >= 2 || $page >= 2) $page_number = ' | ' . sprintf('Page %s', max($paged, $page));
    else $page_number = '';

    if (is_home() || is_front_page()) $seo_title = $name . ' | ' . $description;
    elseif (is_singular())            $seo_title = $title . ' | ' . $name;
    elseif (is_tag())                 $seo_title = 'Tag Archive: ' . $tag . ' | ' . $name;
    elseif (is_category())            $seo_title = 'Category Archive: ' . $cat . ' | ' . $name;
    elseif (is_archive())             $seo_title = 'Archive: ' . $title . ' | ' . $name;
    elseif (is_search())              $seo_title = 'Search: ' . $search . ' | ' . $name;
    elseif (is_404())                 $seo_title = '404 - Not Found: ' . $url . ' | ' . $name;
    else                              $seo_title = $name . ' | ' . $description;

    $output .= "\t\t" . '<title>' . esc_attr($seo_title . $page_number) . '</title>' . "\n";

    return $output;
}

完成之后,在上述代码的第三行中 $default_keywords 的值替换为你自己博客的关键词。

然后,在 header.php 中添加以下代码调用函数:

<?php echo basic_wp_seo(); ?>

P.S. 可以根据自己的需要对上述代码进行微调,以达到最佳效果。

以上代码摘自:digwp.com

修复 WordPress 中 wp-caption 宽度超出10px的问题

默认情况下,如果文章中的图片设置了说明文本(Caption),WordPress 会自动在图片外面添加一个类为.wp-caption的 div,并且设置了这个 div 的宽度值会根据图片尺寸自动加 10px,这个宽度值非常可恶,会打乱我们设定的 CSS 样式,我在做 MinimalismPro 主题的相册样式时就深受其害。

如何删除这个可恶的样式呢?Google 搜罗了一下,总结下来主要有以下四种方式:

(1)修改 WordPress 系统文件

设置函数被包含在了 wp-includes/media.php 这个文件中,在其中找到以下代码(WordPress 3.6 中应该是655行)

return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'

就是这行代码会根据图片文件的宽度自动设置一个增加 10px 的宽度值。删除:

style="width: ' . (10 + (int) $width) . 'px"

或者将代码中的 10 改为 0 ,区别是前者不添加默认样式,后者添加一个宽度与图片宽度一样的样式。

这种方法因为涉及到修改系统文件,所以不建议使用此方法。

(2)样式表修整

这个方法比较简单,但可能不太实用。如果你的页面为固定宽度,可以在样式表使用 !important 属性值修正为想要的宽度:

.entry-content .wp-content {
    width:xxxpx!important;
}

(3)自定义 Shortcode

自定义 Shortcode 来代替 WordPress 默认的 Shortcode 。这个方法是我用的方法,没什么后遗症,比较保险。

将下面的代码粘到主题 functions.php 中即可。

// FixImageMargins
add_shortcode('wp_caption', 'my_img_caption_shortcode');
add_shortcode('caption', 'my_img_caption_shortcode');

function my_img_caption_shortcode($attr, $content = null) {
    // New-style shortcode with the caption inside the shortcode with the link and image tags.
    if ( ! isset( $attr['caption'] ) ) {
        if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
            $content = $matches[1];
            $attr['caption'] = trim( $matches[2] );
        }
    }

    // Allow plugins/themes to override the default caption template.
    $output = apply_filters('img_caption_shortcode', '', $attr, $content);
    if ( $output != '' )
        return $output;

    extract(shortcode_atts(array(
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $attr, 'caption'));

    if ( 1 > (int) $width || empty($caption) )
        return $content;

    if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

    return '<div ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (0 + (int) $width) . 'px">'
    . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></div>';
}

原理和第一种方法一样,当然也可将 style="width: ' . (10 + (int) $width) . 'px" 删除,原因参考第一种方法。

(4)使用插件

将下面的代码保存为一个 .php 文件,然后放在 wp-content\plugins 目录下,在后台插件页面激活即可。

<?php
/**
 * @package FixImageMargins
 * @author Justin Adie
 * @version 0.1.0
 */
/*
Plugin Name: FixImageMargins
Plugin URI: #
Description: removes the silly 10px margin from the new caption based images
Author: Justin Adie
Version: 0.1.0
Author URI: http://rathercurious.net
*/
class fixImageMargins{
    public $xs = 0; //change this to change the amount of extra spacing

    public function __construct(){
        add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
    }
    public function fixme($x=null, $attr, $content){

        extract(shortcode_atts(array(
                'id'    => '',
                'align'    => 'alignnone',
                'width'    => '',
                'caption' => ''
            ), $attr));

        if ( 1 > (int) $width || empty($caption) ) {
            return $content;
        }

        if ( $id ) $id = 'id="' . $id . '" ';

    return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
    . $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }
}
$fixImageMargins = new fixImageMargins();

?>

以上方法仅供参考,更多的解决方法可以戳这里:http://wordpress.org/support/topic/10px-added-to-width-in-image-captions

如何在主题中直接内置Typekit在线字体

typekit-wordpress

使用在线字库在当前的前端设计中似乎越来越流行了,使用最多的应该是Google的Web Fonts,已经有很多国外的WordPress主题作者开始使用这一服务。但不幸的是,因为众所周知的原因,我们对于web fonts却是望而却步。

此外,Typekit也提供在线字库服务,在无法改变国内网络现状的情况下,可以用typekit来替代Google的在线字体服务,虽然与Google比,有种种限制,但唯一的好处是:Typekit使用了EdgeCast的CDN,国内访问的话,电信、联通走的均是香港的节点,速度有保障,最关键的是尚未被墙!

Typekit还有一个专门针对WordPress的插件,可以轻松地添加自己的字体到你的WordPress网站,但是有没有办法直接内置Typekit字体到我们的Wordpress网站中去呢?下面是一个简单的方法可供参考。

将下面的代码丢入主题的 functions.php 文件中。

[php]/**
* TypeKit Fonts
*
* @since Theme 1.0
*/
function theme_typekit() {
wp_enqueue_script( ‘theme_typekit’, ‘//use.typekit.net/xxxxxxx.js’);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_typekit’ );

function theme_typekit_inline() {
if ( wp_script_is( ‘theme_typekit’, ‘done’ ) ) { ?>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
}
add_action( ‘wp_head’, ‘theme_typekit_inline’ );[/php]

P.S.上述代码中第7行的.js文件需要更新成TypeKit提供的js文件哦。

在评论中使用更多HTML标签

allow-more-html-tags-in-wordpress-comments

默认情况下,WordPress的评论模板允许使用少数几个HTML标签,例如:<a>、<strong>……等等。但是,有没有办法在评论模板中使用一些其他的标签呢?下面就是一个简单的方法。

以添加<pre>标签支持为例,在functions.php中添加以下代码:

[php]// Create function which allows more tags within comments
function allow_pres() {
global $allowedtags;
$allowedtags[‘pre’] = array(‘class’=>array());
}

// Add WordPress hook to use the function
add_action(‘comment_post’, ‘allow_pres’);[/php]

上述代码可以延伸至增加其他标签支持。代码摘自David Walsh

ENJOY IT !

如何简单的在WordPress中使用响应式图片

how-to-easily-make-wordpress-images-responsive

响应式网站设计已经越来越普遍,使用响应式图片就是这类网站的一个特点之一。响应式图片不仅仅可以以较大尺寸在大的显示屏是显示,并且可以自适应一些小的显示屏,例如,iPad、iPhone等等。使用响应式图片并不困难,这里就将介绍一个简单的技巧,让你的WordPress博客中使用响应式图片设计。

首先,我们需要在functions.php中定义一个短代码:

function responsive_images($atts, $content = null) {

<em id="__mceDel"> return ‘<div class="image-resized">’ . $content .’</div>’;
}

add_shortcode(‘responsive’, ‘responsive_images’);

完成后,在Style.css中添加以下CSS样式:

@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

在一般情况下,上面的代码已经能够很好地达到我们的意图,但如果你想更进一步,分配不同的图像到不同尺寸的屏幕,你可以将上面的代码做类似于下面这样的扩展:

/* 240px screens */
    @media only screen and (max-width: 319px) {
    .image-resized img {
        width:240px;
        height:auto;
    }
}

/* 320px screens */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .image-resized img {
        width:320px;
        height:auto;
    }
}

/* 480px screens */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .image-resized img {
        width:480px;
        height:auto;
    }
}

OK!大功告成,现在就可以使用我们定义的短代码[responsive]插入响应式图片到博客中了:

[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]

*代码摘自ROCKABLEthemes

通过文章ID来获取文章内容

get-post-content-by-id

在自定义主题时,我们可能需要调取文章的相关信息,如内容(post_content)、标题(post_title)、文章类型(post_type)、作者(post_author)等,通常情况下可以使用自定义Loop来实现,但当我们需要的是仅仅是一篇文章的相关信息时,这里有一个更简单的方法可以实现:

[php]
<?php get_post_field( $field, $post_id, $context ); ?>
[/php]

$field(String):需要调取的文章信息,e.g.

  • post_content
  • post_author
  • post_title
  • etc.

例如,如果调取某一个ID的文章内容时可以这样写:

[php]
echo get_post_field(‘post_content’, $post_id);
[/php]

更多用法可以移步这里参考WordPress官方说明文档。