Reras-factory

ガジェットとかAppleとかいろいろ

プラグインなしでWordPressテーマに実装できる機能を紹介!

  • 2015年10月28日

WordPressテーマにプラグイン無しで実装できる機能を紹介します

現在のブログテーマ『Thunderbird』の最新バージョンではブログそのものの機能はほぼすべてテーマに実装しています。これは以前にも書いたとおり、自作CMSへ移行する際にプラグインに互換性が無くなってしまうからです。そこでThunderbird2.0の開発にあたりテーマに実装した機能のコードを紹介します

1,moreタグをクリックすると記事ページトップへリンク

『続きを読む』ボタンはWordpressでは!–more–というタグになっていて、既定の設定ではタグの続きにリンクしてしまうので『StripTease』というプラグインで対応していました。これはfunctions.phpに以下のコードを追加することで実装することができます

function custom_content_more_link( $output ) {
    $output = preg_replace('/#more-[\d]+/i', '', $output );
    return $output;
}
add_filter( 'the_content_more_link', 'custom_content_more_link' );

See the Pen wp_more by rera_sikani2 (@rera_sikani2) on CodePen.

2,パンくずリスト

ブログ記事の階層を視覚化するとともに構造化データとしてWebマスターツールに認識される形式なのでSEO効果もあります。
これもfunction.phpに以下のコードを挿入して下さい

//パンくずリスト
function breadcrumb(){
     global $post;
     $str='';
     if(!is_home()&&!is_admin()){
          $str.='<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
          $str.='<a href="'.home_url() .'"itemprop="url"><span itemprop="title">ホーム</span></a> &gt;</div>';

          if(is_category()){
               $cat=get_queried_object();
               if($cat->parent!=0){
                    $ancestors=array_replace_recursive(get_ancestors($cat->cat_ID,'category'));
                    foreach ($ancestors as $ancestors) {
                         $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestors).'"itemprop="url"><span itemprop="titile">'.get_cat_name($ancestor).'</span></a> &gt;</div>';
                    }
               }
          $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id).'"itemprop="url"><span itemprop="titile">'.$cat->cat_name.'</span></a></div>';
          }elseif(is_page()){
               if($post->post_parent !=0){
                    $ancestors=array_reverse(get_post_ancestors($post->ID));
                    foreach ($ancestors as $ancestor){
                         $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="' .get_permalink($ancestor).'"itemprop="url"><span itemprop="title">'.get_the_title($ancestor).'</span></a></div>';
                    }
               }
          }elseif (is_single()){
               $categories=get_the_category($post->ID);
               $cat=$categories[0];
               if($cat->parent !=0){
                    $ancestors=array_reverse(get_ancestors($cat->cat_ID,'category'));
                    foreach ($ancestors as $ancestor){
                         $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'"itemprop="url"><span itemprop="title">'.get_cat_name($ancestor).'</span></a> &gt;</div>';
                    }
               }
               $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat->term_id).'"itemprop="url"><span itemprop="title">'.$cat->cat_name.'</span></a></div>';
          }else{
               $str.='<div>'. wp_title('',false).'</div>';
          }
          $str.='</div>';
     }
     echo $str;
}

See the Pen qOoxZM by rera_sikani2 (@rera_sikani2) on CodePen.


そして挿入したいところに

<?php breadcrumb();?>

See the Pen XmEZKV by rera_sikani2 (@rera_sikani2) on CodePen.


と入力して下さい

3,ランダムで記事を選んで表示する

過去の記事を完全ランダムで選んでくれる機能です。サイドバーに置くと最適ですよ。次回のアップデートでは記事末尾にも挿入予定です。
これもfunctions.phpに

//サイドバーへの過去記事ランダム表示
function random_post_list($show_num){
     query_posts('posts_per_page='.$show_num.'&orderby=rand');
     if(have_posts()){
          while(have_posts()){
               the_post();
               echo '<li style="padding-bottom:15px;">';
               the_post_thumbnail(array(120,70),array('style'=>'float:left;overflow:hidden;height:auto;padding-right:0px;margin-right:5px'));
               echo '<a href="';
               the_permalink();
               echo'">';
               the_title();
               echo '</a><br><br><span>(';
               the_time('m月d日');
               echo ')</span></li>';
          }
     }
     wp_reset_query();
}

See the Pen MaVQjo by rera_sikani2 (@rera_sikani2) on CodePen.


を追加し、挿入したいところに

<?php random_post_list(7);?>

See the Pen YyaeGg by rera_sikani2 (@rera_sikani2) on CodePen.


と入力します。かっこの中の数字はランダムで表示する記事数を指定しているので書き換えて表示数を変えることができます。

4,ページネーション

前回のバージョンから先行実装した機能です。次のページ、前のページだけではなく複数ページ間の移動ができるのでユーザビリティも向上します。これはphpファイルの挿入したいエリアに

<!--ページネーション!-->
        <div class="pagenation">
           <?php global $wp_rewrite;
              $pagenate_base=get_pagenum_link(1);
              if(strpos($pagenate_base,'?') || ! $wp_rewrite->using_permalinks()){
                $pagenate_format='';
                $pagenate_base=add_query_arg('paged','%#%');
                }
                else{
        	        $pagenate_format=(substr($pagenate_base,-1,1)=='/'?'':'/').
    	            user_trailingslashit('page/%#%/','paged');;
	                $pagenate_base .='%_%';
                }
                echo paginate_links(array(
                    'base' => $pagenate_base,
                    'format' => $pagenate_format,
                    'total'=>$wp_query->max_num_pages,
                    'mid_size' =>4,
                    'current'=>($paged ? $paged:1),
                    'prev_text'=> '<<前へ',
                    'next_text'=> '次へ>>',
                ));?>
        </div>

See the Pen avYqBK by rera_sikani2 (@rera_sikani2) on CodePen.


と入力すると実装できます。

5,リンク無しでカテゴリリンクを取得する

個別記事の先頭に置くことが多い投稿日時とカテゴリ名。カテゴリ名は普通に取得するとリンク付きで取得されてしまいますが、以下のコードを使うとリンク無しで取得できます

<?php $cat=get_the_category();$cat=$cat=$cat[0];{echo $cat->cat_name;} ?>

See the Pen NGYydr by rera_sikani2 (@rera_sikani2) on CodePen.


この記事をシェアする

コメント

メールアドレスが公開されることはありません。