simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.09.22

WordPressカスタマイズでよくつかうコードやタグ、その他色々

WordPress

この記事は2017年10月16日に内容を更新しました。

WordPressのカスタマイズで個人的によくつかうテンプレートタグやコードをまとめてみました。何回もつかっているくせに中々覚えられません。まあ、コピペしているのが原因というのは重々承知しております。つかえそうなもの、良いものを見つけ次第、随時更新していきます。

functions.phpを編集するときは必ずバックアップをしてから編集されることをおすすめします。
こちらの記事で紹介している方法には、functions.phpを編集するものがいくつかありますが、使用されているテーマや既に導入されているプラグインなどとの兼ね合いで、上手く動作しなくなってしまうことがあるので。

基本のテンプレートタグ

サイト名

<?php bloginfo('name'); ?>

サイトURL

<?php echo home_url(); ?>

現在選択しているテーマのパス

<?php echo get_template_directory_uri(); ?>

投稿した記事・カテゴリー・タグに関するコード、タグ

記事のタイトル

<?php the_title(); ?>

記事のタイトルを文字数制限して出力

<?php
if(mb_strlen($post->post_title, 'UTF-8')>32){
	$title= mb_substr($post->post_title, 0, 32, 'UTF-8');
	echo $title.'…';
}else{
	echo $post->post_title;
}
?>

上記の例では出力する文字数は32文字で制限しています。

記事のURL

<?php echo get_permalink(); ?>

記事のカテゴリー名をリンク付きで表示(複数カテゴリーある場合)

<?php
echo get_the_category_list( ' ,' );
?>

特定カテゴリーの記事を件数を指定して一覧表示

<?php
$posts = get_posts(array(
'posts_per_page' => 5, // 表示件数
'category' => '10', // カテゴリID
'order' => 'DESC', // 並び順
'paged' => $paged // ページネーションを動作させるため
));
?>
<?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
ループさせる内容を記述 
<?php endforeach; endif; ?>

複数のカテゴリーを指定

'category' => '10,15'

特定カテゴリーを除外

'category' => '-10'

複数カテゴリーを除外

'category' => '-10,-15'

新しい投稿から表示

'order' => 'DESC'

古い投稿から表示

'order' => 'ASC'

WordPressで投稿した記事を取得する際、query_postsというタグもありますが、どうやら安定性に欠けるとかで非推奨とされているようです。なので、なるべくget_postsというテンプレートタグをつかった方が無難だそうです。

記事のカテゴリーのスラッグをクラス名としてつかう

ループ内に下記を記述

<?php
$cat = get_the_category();
$cat_name = $cat[0]->cat_name;
$cat_slug  = $cat[0]->category_nicename;
?>

例としてカテゴリー名を囲った<p>にスラッグ名をクラスとして振ってみます。

<p class="<?php echo $cat_slug ?>"><?php echo $cat_name; ?></p>

複数カテゴリーに登録された記事の最初のカテゴリー名だけ表示

カテゴリーページへのリンクなし

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

カテゴリーページへのリンクあり

<?php
$category = get_the_category();
if ( $category[0] ) {
echo '<a href="' . get_category_link( $category[0]->term_id ) . '">' . $category[0]->cat_name . '</a>';
}
?>

記事のタグ

<?php the_tags('タグ一覧の前の表示内容', '区切りの表示', 'タグ一覧の後の表示内容'); ?>

タグ一覧の前の表示内容はデフォルトだとタグ:となっている部分です。区切りの表示は好みに応じて,|を入れてください。単純にタグ名のみを表示したい場合はパラメータの""の中を空欄にします。

条件分岐系

1ページ目と2ページ目以降の表示を変える

<?php if ( !is_paged() ) : // 1ページ目 ?>
1ページ目のみに表示させる部分
<?php else : // 2ページ目以降 ?>
2ページ目以降に表示させる部分(空の場合は何も表示されない)
<?php endif; ?>

記事の一覧で最初の記事だけ見た目を変える

<?php if(have_posts()): while(have_posts()): the_post(); $counter++; ?>
<?php if ($counter <= 1): ?>
// 最初の記事の内容を記述する
<?php else:?>
// 最初の記事以降のループ処理する内容を記述する
<?php endif;?>
<?php endwhile; endif; ?>

下記の部分で最初の○番目の記事か、を指定します。

<?php if ($counter <= 1): ?>

例えば「最初の3つの記事」を指定する場合は次のように書きます。

<?php if ($counter <= 3): ?>

カテゴリーによって表示する内容を変える

カテゴリーAの場合だけ表示させる

<?php if ( in_category( array( 'A' ) )) : ?>
カテゴリーAの場合に表示
<?php else: ?>
それ以外の場合に表示
<?php endif; ?>

カテゴリーAとBの場合だけ表示させる

<?php if ( in_category( array( 'A', 'B' ) )) : ?>
カテゴリーA、Bの場合に表示
<?php else: ?>
それ以外の場合に表示
<?php endif; ?>

カテゴリーAとBとそれ以外で表示する内容を変える

<?php if ( in_category( array( 'A' ) )) : ?>
カテゴリーAの場合に表示
<?php elseif ( in_category( array( 'B' ) )) : ?>
カテゴリーBの場合に表示
<?php else: ?>
それ以外の場合に表示
<?php endif; ?>

カテゴリーA以外の場合表示させる

<?php if ( !in_category( array( 'A' ) )) : ?>
カテゴリーA以外で表示
<?php else: ?>
カテゴリーAの場合に表示
<?php endif; ?>

プラグインを使わずに色々

プラグインなしでページネーション

function.phpに下記を追記

function pagination($pages = '', $range = 2)
{
     $showitems = ($range * 2)+1;//表示するページ数(5ページを表示)

     global $paged;//現在のページ値
     if(empty($paged)) $paged = 1;//デフォルトのページ

     if($pages == '')
     {
         global $wp_query;
         $pages = $wp_query->max_num_pages;//全ページ数を取得
         if(!$pages)//全ページ数が空の場合は、1とする
         {
             $pages = 1;
         }
     }

     if(1 != $pages)//全ページが1でない場合はページネーションを表示する
     {
		 echo "<div class=\"pagination\">\n";
		 echo "<ul>\n";
		 //Prev:現在のページ値が1より大きい場合は表示
         if($paged > 1) echo "<li class=\"prev\"><a href='".get_pagenum_link($paged - 1)."'>Prev</a></li>\n";

         for ($i=1; $i <= $pages; $i++)
         {
             if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
             {
                //三項演算子での条件分岐
                echo ($paged == $i)? "<li class=\"active\">".$i."</li>\n":"<li><a href='".get_pagenum_link($i)."'>".$i."</a></li>\n";
             }
         }
		//Next:総ページ数より現在のページ値が小さい場合は表示
		if ($paged < $pages) echo "<li class=\"next\"><a href=\"".get_pagenum_link($paged + 1)."\">Next</a></li>\n";
		echo "</ul>\n";
		echo "</div>\n";
     }
}

ページネーションを表示させたい部分に下記を記述

<?php
//Pagination 
if (function_exists("pagination")) {
	pagination($additional_loop->max_num_pages);
}
?>

吐き出されたHTMLはリスト形式になっているので、CSSで見た目を整えてください。

プラグインなしでぱんくずリスト

functions.phpに下記を追記

function breadcrumb(){
    global $post;
    $str ='';
    if(!is_home()&&!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */
        $str.= '<div id="breadcrumb" class="clearfix">';
        $str.= '<ul>';
        $str.= '<li><a href="'. home_url() .'/">HOME</a></li>';
        $str.= '<li>&nbsp;&gt;&nbsp;</li>';
        
        if(is_search()){
            $str.='<li>「'. get_search_query() .'」で検索した結果</li>';
        } elseif(is_tag()){
            $str.='<li>タグ : '. single_tag_title( '' , false ). '</li>';
        } elseif(is_404()){
            $str.='<li>404 Not found</li>';
        } elseif(is_date()){
            if(get_query_var('day') != 0){
                $str.='<li><a href="'. get_year_link(get_query_var('year')). '">' . get_query_var('year'). '年</a></li>';
                $str.='<li>&nbsp;&gt;&nbsp;</li>';
                $str.='<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
                $str.='<li>&nbsp;&gt;&nbsp;</li>';
                $str.='<li>'. get_query_var('day'). '日</li>';
            } elseif(get_query_var('monthnum') != 0){
                $str.='<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
                $str.='<li>&nbsp;&gt;&nbsp;</li>';
                $str.='<li>'. get_query_var('monthnum'). '月</li>';
            } else {
                $str.='<li>'. get_query_var('year') .'年</li>';
            }
        } elseif(is_category()) {
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
                    $str.='<li>&nbsp;&gt;&nbsp;</li>';
                }
            }
            $str.='<li>'. $cat -> name . '</li>';
        } elseif(is_author()){
            $str .='<li>投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</li>';
        } elseif(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<li><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a></li>';
                    $str.='<li>&nbsp;&gt;&nbsp;</li>';
                }
            }
            $str.= '<li>'. $post -> post_title .'</li>';
            
        } elseif(is_attachment()){
            if($post -> post_parent != 0 ){
                $str.= '<li><a href="'. get_permalink($post -> post_parent).'">'. get_the_title($post -> post_parent) .'</a></li>';
                $str.='<li>&nbsp;&gt;&nbsp;</li>';
            }
            $str.= '<li>' . $post -> post_title . '</li>';
        } 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.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor). '</a></li>';
                    $str.='<li>&nbsp;&gt;&nbsp;</li>';
                }
            }
            $str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>';
            $str.='<li>&nbsp;&gt;&nbsp;</li>';
            $str.= '<li>'. $post -> post_title .'</li>';
        } else{
            $str.='<li>'. wp_title('', false) .'</li>';
        }
        $str.='</ul>';
        $str.='</div>';
    }
    echo $str;
}

ぱんくずリストを表示させたい箇所に下記を追記

<?php breadcrumb(); ?>

以前までは下記の方法をつかっていましたが、これだと子カテゴリーの上に親カテゴリーがある場合、親カテゴリーの部分が表示されなかったので、上記の方法の方が良さそうです。

function.phpに下記を追記

function data_bread_crumbs(){
    $html = "";
    $html .= '<ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">';
    if(!is_front_page()){
        $html .= '<li class="home" itemprop="itemListElement" itemscope  itemtype="https://schema.org/ListItem">';
        $html .= '<a href="'.get_bloginfo('url').'" itemprop="item">';
        $html .= '<span class="title" itemprop="name"><i class="fa fa-home" aria-hidden="true"></i></span>';
        $html .= '<meta itemprop="position" content="1">';
      $html .= '</a></li>';
    }
    $postcat = get_the_category();
    $catid = $postcat[0]->cat_ID;
    $html .= '<li itemscope itemprop="itemListElement" itemscope  itemtype="https://schema.org/ListItem">';
    if(!is_category()){
        $html .= '<a href="'.get_category_link($catid).'" itemprop="item" title="'.get_cat_name($catid).'">';
    }
    $html .= '<span class="title" itemprop="name">'.get_cat_name($catid).'</span>';
    if(!is_category()){
    $html .= '</a>';
    }
    $html .= '<meta itemprop="position" content="2">';
    $html .= '</li>';
    if(!is_category()){
        $html .= '<li class="title" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="name">'.get_the_title().'</span>';
        $html .= '<meta itemprop="position" content="3"></li>';
    }
    $html .= '</ul>';
    echo $html;
}

ぱんくずリストを表示させたい部分に下記を記述

<?php
if(function_exists('data_bread_crumbs')){
data_bread_crumbs();
}
?>

プラグインなしでクイックタグボタンを追加

function.phpに下記を追記

基本形

function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('ID(英数字をつかって任意のIDを決める)', 'ボタンの名前', '開始タグ(1回目のクリックで表示させる内容)', '終了タグ(2回目のクリックで表示させる内容)');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
?>

function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('test01', 'クイックタグボタンのテスト', '<p>これはクイックタグボタンのテスト', '</p>');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
?>

出力するソースに改行を入れる

function add_my_quicktag() {
?>
<script type="text/javascript">
QTags.addButton('test02', 'クイックタグボタンのテスト02', '<ul>' + '\n'
 + '<li><li>' + '\n' + '</ul>', '');
</script>
<?php
}
add_action('admin_print_footer_scripts',  'add_my_quicktag');
?>

方法としては、1行として出力したいソースを「'」で囲み、改行したい箇所に「 + '\n' + 」(「+」の前後の半角スペースも忘れずに。もしかしたら動作しなくなるかも。)と記述します。
また、終了タグを「''」と空にしておけば1度ボタンを押すだけで表示させたいソースを全て表示させることが出来ます。
また、この実装方法ではビジュアルエディタではボタンが追加されないようです。僕は基本的にはテキストエディタしかつかわないので中々気付きませんでした。

プラグインなしで勝手に挿入される改行タグやpタグを削除

function.phpで対応する場合

function.phpに下記を追記

remove_filter ( 'the_content', 'wpautop' );
remove_filter ( 'the_excerpt', 'wpautop' );

テンプレートファイルで対応する場合

本文を出力する下記の関数を

<?php the_content(); ?>

次のようにする

<?php echo get_the_content(); ?>

プラグインなしでPCとモバイルでの記事一覧の表示件数を切り替える

function.phpに下記を追記

function mobile_pre_get_posts( $query ) {
    if ( ! is_admin() && wp_is_mobile() && $query->is_main_query() ) {
        $query->set( 'posts_per_page', 10 );
    }
}
add_action( 'pre_get_posts', 'mobile_pre_get_posts' );

プラグインなしでウィジェットで表示されるカテゴリー一覧から特定のカテゴリーを除外する

function.phpに下記を追記

function exclude_widget_categories( $args){
    $exclude = '3,6,18';          // 除外するカテゴリーのIDをカンマ区切りで指定
    $args['exclude'] = $exclude;
    return $args;
}
add_filter( 'widget_categories_args', 'exclude_widget_categories');
【WordPress】シンプルなオリジナルテーマの作り方(8)~検索フォーム~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(8)~検索フォーム~

YogeeNewWavesと大森靖子という人達

THOUGHT

YogeeNewWavesと大森靖子という人達

妊婦と1歳児の神食

LIFE

妊婦と1歳児の神食

SNSボタンを<a>タグで簡単に実装する方法

WEB

SNSボタンを<a>タグで簡単に実装する方法

【WordPress】プラグインを使わずにURLのコピペで任意の記事を表示

WordPress

【WordPress】プラグインを使わずにURLのコピペで任意の記事を表示

bootstrap4の個人的なスターターテンプレート

WEB

bootstrap4の個人的なスターターテンプレート

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(3)~フッター~

アルビレックス新潟、踏み止まる

THOUGHT

アルビレックス新潟、踏み止まる