2018/07/15 改訂版 「『あなたの悩み、分かるわ』詐欺に気を付けろ」「周りの人をカウンセラーにしない」「人生なんて相談しても仕方がないことが多い」

LION MEDIA のカスタム投稿タイプ向けカスタマイズ

LION MEDIA のカスタム投稿タイプ向けカスタマイズ

2017年10月にリリースされたWordPress無料テーマ・テンプレート『LION MEDIA』(by FIT)のカスタム投稿向けカスタマイズです。
//lionmedia.fit-jp.com

テーマ自体は非常に好きですし、デフォルトで欲しい機能は大半が揃っているので、ほとんどカスタマイズする箇所もないのですが、カスタム投稿に関しては、やはり自前で工夫しないといけないので、いくつか紹介しておきます。(カスタム投稿に関しては、どのテーマ・テンプレートでも自己カスタマイズ必須ですが)

カスタム投稿タイプで、single-○○.phpなど独自のテンプレート・ファイルを挿入する場合、管理画面の『テーマ >自動アップデート機能』を行うと、独自ファイルも削除されてしまいます。テーマをアップデートする時は、必ずFTPを使って、手動でアップデートして下さい。

カスタム投稿タイプでもSEO対策ができるようにする

LION MEDIA、LION BLOGとも、各投稿記事でSEO対策ができるカスタムフィールド機能が備わっているのですが、カスタム投稿タイプにも適用するには、オリジナルのfunctions.phpに追記する必要があります。(チャイルドテーマのfunctions.php に追記や移動してもエラーになります)

たとえば、カスタム投稿タイプのスラッグが list と word の場合 『SEO専用カスタムフィールド追加』の箇所に、必要な分だけ追記します。

add_meta_box( 'seo_setting', 'SEO対策', 'insert_seo_fields', 'カスタム投稿名', 'normal', 'high');

※機能を有効にするには、カスタム投稿タイプの設定で「カスタムフィールド:True」にするのを忘れないこと

//////////////////////////////////////////////////
// SEO専用カスタムフィールド追加
//////////////////////////////////////////////////
function add_seo_fields() {
    add_meta_box( 'seo_setting', 'SEO対策', 'insert_seo_fields', 'post', 'normal', 'high');
    add_meta_box( 'seo_setting', 'SEO対策', 'insert_seo_fields', 'page', 'normal', 'high');
    add_meta_box( 'seo_setting', 'SEO対策', 'insert_seo_fields', 'list', 'normal', 'high');
    add_meta_box( 'seo_setting', 'SEO対策', 'insert_seo_fields', 'word', 'normal', 'high');
}
add_action('admin_menu', 'add_seo_fields');

この機能は、短文投稿で、NoIndex を設定する場合に便利です。Yoastや、All in One SEO のような、SEO対策プラグインもありますが、サイトの質によっては、かえって負荷をかけてしまうので、部分的に利用するのが一番だと思います。

カスタム投稿タイプ SEO対策

ちなみに、チェックをつけると、カスタムフィールドにはこのような値が記入されます。「1」=有効。

カスタム投稿タイプ SEO対策

ヘッダーには、 meta name=”robots” content=”noindex” が自動的に挿入されます。

カスタム投稿タイプ SEO対策

カスタム投稿タイプでも目次の設定ができるようにする

SEO対策ボックスと全く同じ要領です。

オリジナルのfunctions.phpの『目次の表示/非表示、個別選択設定』に追記。

add_meta_box( 'outline_setting', '目次の個別非表示設定', 'insert_outline_fields', 'カスタム投稿名', 'normal');

※機能を有効にするには、カスタム投稿タイプの設定で「カスタムフィールド:True」にするのを忘れないこと

//////////////////////////////////////////////////
//目次の表示/非表示、個別選択設定
//////////////////////////////////////////////////
if ( get_option('fit_post_outline') != 'value2') {
    function add_outline_fields() {
        //add_meta_box(表示される入力ボックスのHTMLのID, ラベル, 表示する内容を作成する関数名, 投稿タイプ, 表示方法)
        add_meta_box( 'outline_setting', '目次の個別非表示設定', 'insert_outline_fields', 'post', 'normal');
        add_meta_box( 'outline_setting', '目次の個別非表示設定', 'insert_outline_fields', 'notes', 'normal');
        add_meta_box( 'outline_setting', '目次の個別非表示設定', 'insert_outline_fields', 'word', 'normal');
}
    add_action('admin_menu', 'add_outline_fields');

カスタム投稿タイプの投稿画面にも、目次設定のボックスが表示されます。

カスタム投稿タイプ SEO対策

outline_none 「1」=非表示 の意味です。

カスタム投稿タイプ SEO対策

ヘッダーのタイトル部にターム名を表示する

LION MEDIA のカスタム投稿タイプ向けカスタマイズ

デフォルトの状態だと、ヘッダーのタイトル部に、カテゴリー名とタグ名がアイコン付きで綺麗に表示されるのですが、タクソノミー分類を利用しているカスタム投稿タイプの場合、空白になってしまいます。

タイトル部分に、カスタム投稿タイプのラベルとターム名を出力する方法は二通りあります。

1)single-○○.php を作成して、dateList dateList-singleTitle の部分を書き換える

2)single.php で一括指定する

基本のタグ

カスタム投稿のラベル(名前)を取得

<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>

カスタム投稿のアーカイブリンクを取得

<a href="<?php echo get_post_type_archive_link( get_post_type() ); ?>">カスタム投稿のラベル</a>

ターム名を出力する基本のタグ

<?php echo get_the_term_list($post->ID, 'ターム名', '', ' , '); ?>

single-○○.php を作成する方法

カスタム投稿に使う、single-○○.php を作成して、dateList dateList-singleTitle の部分を書き換えます。

タームが複数存在する場合は、 , を使って併記します。

タームが subject の場合。

classの icon-folder がカテゴリーのフォルダアイコン。 icon-tag がタグのアイコンに相当します。

<ul class="dateList dateList-singleTitle">
          <li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
          <li class="dateList__item icon-folder"><a href="<?php echo get_post_type_archive_link( get_post_type() ); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></li> // カスタム投稿のラベルを取得し、アーカイブにリンクをはる
          <li class="dateList__item icon-tag"><?php echo get_the_term_list($post->ID,'subject','',','); ?></li> // ターム名を取得
        </ul>

タームが一つだけで、カテゴリーリストの代わりにカスタム投稿タイプのアーカイブを表示したい場合。
カテゴリーリストを表示するタグを抜いて、通常のリンクに置き換えます。(基本的に何を置いてもOK)
タグリストの部分には、タームリストのタグを置きます。

カスタム投稿タームがtopics の場合。

<ul class="dateList dateList-singleTitle">
          <li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
          <li class="dateList__item icon-folder"><a href="/word/">ライティング</a></li>
          <li class="dateList__item icon-tag"><?php echo get_the_term_list($post->ID,'topics','',','); ?></li></li>
        </ul>

single.php で一括指定する

オリジナルの記述では、echo $cat_name でカテゴリー名を取得し、the_tags(”) でタグ名を取得しています。

カスタム投稿にラベル名やターム名を呼び出す場合は、条件分岐を応用すればOK。

オリジナルの記述

  <ul class="dateList dateList-singleTitle">
          <li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
          <li class="dateList__item icon-folder"><a class="hc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>" href="<?php echo $cat_link; ?>" rel="category"><?php echo $cat_name; ?></a></li>
          <?php if(has_tag() == true) : ?><li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?>
        </ul>

カテゴリー名の代わりに、カスタム投稿のラベルを取得し、アーカイブリンクを自動挿入。

カスタム投稿 movie から ターム subject に属するターム名を取得。

カスタム投稿 news から ターム genre に属するターム名を取得。

それ以外は通常のタグ名を出力する場合。

   <ul class="dateList dateList-singleTitle">
          <li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>
          <li class="dateList__item icon-folder">
<a class="hc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>" href="<?php echo $cat_link; ?>" rel="category"><?php echo $cat_name; ?></a> // カテゴリー名を取得(オリジナル)
<a href="<?php echo get_post_type_archive_link( get_post_type() ); ?>"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a>// カスタム投稿のラベルを取得し、アーカイブにリンク
</li>
         
//追記
          <?php if(get_post_type()=='movie'): ?>
<li class="dateList__item icon-tag"><?php echo get_the_term_list($post->ID, 'subject', '', ' , '); ?></li>
     <?php elseif(get_post_type()=='news'): ?>
<li class="dateList__item icon-tag"><?php echo get_the_term_list($post->ID, 'genre', '', ' , '); ?></li>  
<?php else: ?>
//ここまで

          <?php if(has_tag() == true) : ?><li class="dateList__item icon-tag"><?php the_tags(''); ?></li><?php endif; ?>// 通常タグを取得(オリジナル)

              <?php endif; ?>
        </ul>

本文下にタームリストを表示

前述の応用です。
本文の末尾にもタームリストやタグリストを表示したい場合、single.php single-○○.phpの the_content() の続きに、 get_the_term_list を追記します。
li のスタイルは、デフォルトを応用します。そのままだと、フォントが小さすぎて見えないので。
ここでは dateList__item を sub に置き換え、子テーマのstyle.cssに上書きしています。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <section class="content">
        <?php the_content(); ?>
        <p><li class="sub icon-tag"><?php echo get_the_term_list($post->ID,'subject',' ',' ,'); ?></li></p>
      </section>
      <?php endwhile; endif; ?>

マージンなどは適当に調整して下さい。

カスタム投稿タイプ タクソノミー

ウィジェットの新着記事にカスタム投稿を含める

ウィジェットを使ってサイドバーやフッターに新着記事を表示する方も多いと思いますが、デフォルトの状態では、カスタム投稿タイプは含まれません。

通常の投稿と併せて、カスタム投稿タイプも表示したい場合は、functions.phpに次のように追記します。

movie と news を追加する場合。

add_filter('widget_posts_args', 'widget_posts_args_add_custom_type');
function widget_posts_args_add_custom_type($params) {
   $params['post_type'] = array('post','movie','news');
   return $params;
}

トップページから特定のタームに属する記事を除外する

カスタム投稿タイプの中には、特定のタームに属する記事をトップページから除外したい場合もあると思います。(短文のジャンク記事など)

子テーマのfunctions.php に追記。

タクソノミー『news』の junk に属する記事と、 『diary』の tweet に属する記事を除外する場合。
一つだけ除外する場合は、array () で括った部分をまるごと削除して下さい。
また、is_home の部分に、is_category などを追記すると、カテゴリーページからも除外することができます。

//特定のタームを除外
add_action( 'pre_get_posts', 'my_exclude_terms_from_query' );
function my_exclude_terms_from_query( $query ) {
if ( is_home() && ! isset( $wp_query->query_vars['suppress_filters'] ) ) {
        $tax_query = array (
                array(
                    'taxonomy' => 'news',
                    'terms' => array( 'junk' ),
                    'field' => 'slug',
                    'operator' => 'NOT IN',
                ), 
            array(
                    'taxonomy' => 'diary',
                    'terms' => array( 'tweet' ),
                    'field' => 'slug',
                    'operator' => 'NOT IN',
                ), 
        );
   
        $query->set( 'tax_query', $tax_query );
    }
}

トップページから特定のタームに属する記事を除外する

RSSから特定のタームに属する記事を除外する場合も、同じような要領で。

//RSS Feedから指定タームを除外
function myFilter($query) {
if ($query->is_feed) {
   $tax_query = array (
                array(
                    'taxonomy' => 'genre',
                    'terms' => array( 'junk' ),
                    'field' => 'slug',
                    'operator' => 'NOT IN',
                )
        );
        $query->set( 'tax_query', $tax_query );
    }
}
add_filter('pre_get_posts','myFilter');

投稿のウィジェットを並び替える

記事下シェアボタンや広告の位置など、並び順を変更したい場合は、該当の部分をまるっと入れ替えればOK。

たとえば、記事下ウィジェットに『お知らせ』のインフォメーションを出していて、シェアボタンより上に表示したい場合、該当部の並びを入れ替えれば、表示順も同じように入れ替わります。私も一部で入れ替えていますが、特に問題ありません。

//ここから
<?php if ( get_option('fit_post_shareBottom') != 'value2' ):?>
      <!-- 記事下シェアボタン -->
        <?php fit_share_btn(); ?>
      <!-- /記事下シェアボタン -->
      <?php endif; ?>      
// ここまで

//ここから
      <?php if (!$myAmp && is_active_sidebar('post-bottom')) :?>
      <!-- 記事下エリア[widget] -->
        <?php
          echo '<aside class="widgetPost widgetPost-bottom">';
          dynamic_sidebar('post-bottom');
          echo '</aside>';
        ?>
      <!-- /記事下エリア[widget] -->
      <?php endif; ?>
//ここまで

アーカイブにターム名を表示(トップページ、カテゴリーなど)

カスタム投稿にタクソノミーを設定している場合、デフォルトのままだと、ターム名は表示されません。

loop.php の dateList__item icon-tag でタグ名を出力している続きに、echo get_the_term_list を記入して、カスタム投稿にはターム名が表示されるようにします。

カスタム投稿のスラッグが movie と news 、出力したいタームの種類が subject と genre の場合。
該当しない場合は、the_tags で 通常タグが表示されます。
他にもっとスマートなやり方があると思いますが、これが一番分かりやすいので。

// カスタム投稿タイプの条件分岐
<?php if (( get_post_type() == 'movie' || get_post_type() == 'news' )): ?>
        <ul class="dateList dateList-archive">     
          <li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>// 日付
          <li class="dateList__item icon-tag">
<?php echo get_the_term_list($post->ID, 'subject', '', ' , '); ?>
<?php echo get_the_term_list($post->ID, 'genre', '', ' , '); ?>
<?php the_tags(''); ?>      
          </ul>
       <?php endif; ?>
// ここまで  

// ここからオリジナルのコード
<?php if (get_post_type($post->ID) == 'post') :
        if (get_option('fit_post_time') != 'value2' || has_tag() == true ) :    ?>
        <ul class="dateList dateList-archive">     
          <?php if (get_option('fit_post_time') != 'value2' ) : ?>
          <li class="dateList__item icon-calendar"><?php the_time('Y.m.d'); ?></li>

ターム名 Lion Media

アーカイブのカテゴリー部分に独自の名称を表示(トップページ、カテゴリーなど)

上記の続き。カスタム投稿タイプだと、カテゴリー名に相当する部分が表示されないので、loop.php をいじって、任意の名称とリンクを出力するようにカスタマイズします。

カスタム投稿が1つの場合。

<? php if(get_post_type()=='カスタム投稿名'): ?>
          <span class="eyecatch__cat  u-txtShdw"><a href="任意のリンク">出力したい名称</a></span>
<?php else: ?>

カスタム投稿が2つの場合

<? php if(get_post_type()=='カスタム投稿名 1'): ?>
          <span class="eyecatch__cat  u-txtShdw"><a href="任意のリンク">出力したい名称</a></span>
          <?php elseif(get_post_type()=='カスタム投稿名 2'): ?>
          <span class="eyecatch__cat  u-txtShdw"><a href="任意のリンク">出力したい名称</a></span>
          <?php else: ?>
以下、オリジナルのコード

応用すると、次のようになります。

カスタム投稿のスラッグ news には、カスタム投稿名のラベルを表示、notes には文字列のNotesを出力。リンク先は、カスタム投稿タイプのアーカイブページです。

 <div class="eyecatch eyecatch-archive">
          <?php if(is_sticky()):?>
            <span class="eyecatch__ribbon">Pickup</span>
          <?php endif;?>

//カスタムポストタイプ 1つめ
          <?php if(get_post_type()=='news'): ?>
          <span class="eyecatch__cat u-txtShdw"><a href="/news/"><?php echo esc_html(get_post_type_object(get_post_type())->label); ?></a></span>
//ここまで

//カスタムポストタイプ 2つめ
          <?php elseif(get_post_type()=='notes'): ?>
          <span class="eyecatch__cat u-txtShdw"><a href="/notes/">Notes</a></span>
          <?php else: ?>
// ここまで

//オリジナルの記述  
          <span class="eyecatch__cat bgc<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?> u-txtShdw"><?php the_category(' ');?></span>
          <?php endif; ?>    
          <a href="<?php the_permalink(); ?>"><?php if(has_post_thumbnail()) {the_post_thumbnail('icatch');} else {echo '<img src="'.get_template_directory_uri().'/img/img_no.gif" alt="NO IMAGE"/>';}?></a>
        </div>

オリジナルにはclassに次の記述が含まれますが、カテゴリーの色指定をしてなければ、省略しても大丈夫です。

<?php if (isset($cat_meta[$cat_id])) { echo esc_html($cat_meta[$cat_id]);} ?>

echo get_the_term_list($post->ID,’ターム名’,”,’,’); を使えば、ターム名の出力もできます。

タームもしくはカテゴリーベースの関連記事を表示する

ここをカスタマイズすればいいのですが、今はやり方がわかりません ┐(´-`)┌

やり方が分かりました。長いので、こちらの記事に紹介しています。

LION MEDIA のカスタム投稿タイプの関連記事、アーカイブ表示、ウィジェットの新着

おすすめのポイント

配布元でも詳しく紹介されていますが、その他の有名な無料(爆速)テーマ・テンプレート同様、デフォルトで、投稿項目の表示/非表示、SEO対策、アクセス解析、子テーマによるスタイルシートやfunctions.php の上書き、広告の挿入、AMP化など、いろんな機能が実装されていますので、初心者でも非常に使いやすいテーマだと思います。

最初、ちょっと分かりずらいのは、投稿の本文に相当する部分のスタイルシートが、 CSS / content.css として独立して設定されていること。
(見出しや引用のデザイン変更するのに、通常のstyle.css を探しても出てこない)

カスタム投稿にも同様の機能を実装するには、functions.php などに追記する必要があり、初心者には少しハードルが高いこと(どんなテーマ・テンプレートにも共通していえることですが)。

見映えに拘るなら、こちらのテーマが一番垢抜けていますし、ファイル内の説明書きも非常に丁寧で、カスタマイズしやすいと思います。

スピードアップに関しては、いろんなプラグインがありますが、キャッシュ系やら、圧縮形やら、あまりごちゃごちゃ搭載しない方が、かえっていいような気はします。私の経験では。
かえってゴミが溜まって、激重になります。表示が崩れたり、Jsが動かないなど、弊害もありますしね。
どうしても使うならWP Fastest Cacheみたいに、自動的にキャッシュをクリアしてくれるものがおすすめです。キャッシュを溜める時間が長いと、逆に負荷をかけますし。キャッシュするのはPostだけ、15分おきにクリア、程度でちょうどいいかと。

ちなみにWP Fastest Chacheで計測したGTmetrix。
アクセスの集中する長文+画像多しで、これぐらいのスコアなので、1000~2000文字ぐらいの標準的な投稿なら、もっと速いと思います。

うちで一番アクセスが集中しやすい記事。画像は36枚。長文です。
LION MEDIA

こちらもアクセスの多い記事。画像16枚、やや長めの記事。
LION MEDIA

こちらは読了に10分はかかる長文。画像1枚。YouTubeの埋め込みあり。これくらいなら許容範囲かと。
LION MEDIA

YouTubeを複数埋め込んだら、当然、スコアは悪化します。
サイトパフォーマンスを改善したければ、極力、YouTubeや、外部のウィジェット、ギャラリーの類いは使わないことですね ┐(´-`)┌

LION MEDIA

その他のカスタマイズ

LION MEDIA のカスタム投稿タイプの関連記事、アーカイブ表示、ウィジェットの新着

1. カスタム投稿タイプにカテゴリーを設置する
2. カスタム投稿タイプの関連記事を表示する
3. カスタム投稿タイプをカテゴリー&タグのアーカイブに含める
4. ウィジェットの新着記事にカスタム投稿タイプを含める
5. カスタム投稿のタームを記事下に表示(条件分岐)
6. 最終更新日の表示

LION MEDIA(LION BLOG)のカスタマイズ

Tags: , ,

最終更新日: 2018年2月26日 初回公開日:2018.01.18

海洋小説『曙光』MORGENROOD

CTA-IMAGE
海洋科学、鉱業、建築などをモチーフにした新感覚の人間ドラマ。『生の哲学』をテーマに人生、恋愛、仕事について描く長編小説です。Kindle Unlimitedなら読み放題。