WordPressでトップページのカテゴリー表示を変更する方法

WordPress

WordPressのトップページにカテゴリーが表示されるようなテーマを使用している方は多いと思います。
今回は、このトップページのカテゴリーの表示を変更する方法を紹介します。


ほとんどのWordPressテーマがトップページにカテゴリー表示をおこなっていると思いますが、このカテゴリーの表示を増やしたり減らしたりする方法になります。


PHPファイルを修正する必要はなく、WordPressの設定で変更することができます。


環境情報


  • CMS:WordPress 5.1.5
  • テーマ:Sparkling 2.4.5

カテゴリーとは


WordPressでのカテゴリーとは、記事に設定する属性情報となります。
意味合いとしては『分類』です。


記事を登録するときに、設定可能な情報になります。

WordPressのカテゴリ

記事にカテゴリーを設定することで分類わけをおこない、カテゴリー毎の絞り込みを可能とします。
筆者は、カテゴリーをURLの一部にすることよってURLでもカテゴリーがわかるようにしています。

URLに含まれるカテゴリ

カテゴリーは、1つの記事に対して複数設定する事も可能です。
その場合、筆者はURLが付けにくくなるので、1つの記事に対しては必ずカテゴリーは一つにしています。


カテゴリーの表示内容変更


トップページに表示されているカテゴリーの表示内容を変更しようとします。
具体的には以下の箇所になります。

ヘッダのカテゴリ

今回は、この部分に表示されているカテゴリー表示を変更します。


ブログを運営していくと途中でカテゴリーが増えたりすることがありますが、この部分の表示は自動で増えたりはしないです。
自分で設定を変更する必要があります。


左メニューの「外観」→「テーマ」から、使用しているテーマの「カスタマイズ」ボタンを押下します。
筆者が使っているテーマはSparklingです。

Sparklingのカスタマイズ

Sparklingの設定ウィンドウをひらいたら、左メニューで「メニュー」ボタンを押下します。

Sparklingのカスタマイズ

次の画面では、左メニューで「メインメニュー」ボタンを押下します。

Sparklingのカスタマイズ

メインメニューの設定変更ウィンドウをひらきました。
この画面で、ヘッダに表示されているカテゴリーの表示を変更することができます。


現時点でヘッダに表示されている3つのカテゴリー(Linux、WordPress、Java)が表示されています。
ここに、既に存在するカテゴリーの表示追加をおこないます。


「+項目を追加」ボタンを押下します。


項目追加メニューがひらきました。
今回追加したいのはカテゴリーなので、「カテゴリー」ボタンを押下します。

Sparklingのカスタマイズ

追加可能なカテゴリーが表示されました。
記事が存在するがヘッダに表示されていないカテゴリーについて「+」ボタンを押下して追加していきます。

Sparklingのカスタマイズ

追加が終わったら左上の「公開」ボタンを押下して、ブログのヘッダに反映をおこないます。

Sparklingのカスタマイズ

最後に、実際のブログで変更内容が反映されたかを確認すれば変更完了です。


Sparklingのカスタマイズ後のカテゴリ変更
PCサイト

Sparklingのカスタマイズ後のカテゴリ変更
スマートフォンサイト

まとめ


WordPressのメインメニューに表示されているカテゴリーの変更方法を紹介しました。


まとめ
  • カテゴリーの表示方法変更は、WordPressの設定変更で可能
  • カテゴリーは自動で増えないので注意が必要


アイキャッチ画像の位置をタイトルの下に変更する方法

WordPress

WordPressの記事にアイキャッチ画像を設定している人は多いかと思います。

多いというよりも、もはや設定するのは常識ですね。

記事の見栄えも良くなるので、読者の興味を引きやすいです。


僕もWordPressでブログを立ち上げて記事を投稿していくなかで、”そろそろアイキャッチ設定するかなー”と思い、アイキャッチ画像をアップロードしたのですが、アイキャッチ画像がタイトルの上に表示されました。

アイキャッチ画像のデフォルト位置

好みかもしれませんが、”アイキャッチ画像はタイトルの下でしょ”って思いませんかね?

なんとなく、タイトルの上に画像だと記事の収まりが悪いといいますか。。。


では修正しよう!と思っても、この位置を変更するのは、WordPressに慣れていない人や、PHP初心者の方には難しい部分があります。


今回は、WordPress・PHP初心者の方もアイキャッチ画像位置の変更がおこなえるように、変更方法を説明していきます。



アイキャッチ画像とは

アイキャッチ画像とは、その名の通りアイ(ユーザの目線を)キャッチ(引き付ける)画像です。


ユーザが検索結果から様々な記事をみていく中で、”この記事を読んでみよう”と興味を持ってもらう必要があります。

 

そういった目的の中では、文字よりも画像の方が効果が大きいです。

アイキャッチ画像の設定は必須と思った方がよく、よりユーザ集客に効果的な画像を設定することが重要になります。


アイキャッチ画像位置を変更する

アイキャッチ画像の位置を修正するには、記事を構成するPHPファイルを修正する必要があります。


PHPファイルはWordPressのダッシュボードから修正可能ですが、今回は以下の流れでPHPファイルの修正をおこないます。


  1. SSHでサーバに接続して修正ファイルをバックアップ
  2. WordPressでPHPファイルを修正する

SSHでサーバに接続して修正ファイルをバックアップ 

PHPファイルを修正する際、バックアップを行うことを推奨します。

もし、修正を間違えるとWebページ自体が表示されなくなる可能性があります。


この場合、PHPファイルをバックアップしていれば元に戻すことは可能ですが、バックアップしていなければ元に戻すことができなくなる可能性があります。


という訳で、バックアップをおこないます。

僕のブログのWordPressは、ロリポップレンタルサーバ上で動作しているのですが、SSHが無料で使えます。


なので、WinScpを使用してSSHでサーバに接続します。

  • WordPress:WordPress5.2
  • テーマ:Sparkling

SSHでサーバに接続し、テーマ(Sparkling)のcontent-single.phpを確認します。

content-single.phpの格納場所

バックアップするファイルは以下になります。

  • フォルダ:/wp-content/themes/sparkling/template-parts
  • ファイル:content-single.php

パスをみて気が付くかもしれませんが、バックアップするのはテーマ(Sparkling)の中のPHPファイルになります。

このファイルを作業しているパソコンにダウンロードしておきましょう。


これで、バックアップ完了です。

アイキャッチ画像の位置変更作業で元に戻す必要が出てきた場合は、バックアップしたファイルに戻してください。

アイキャッチ画像位置を変更する

それではアイキャッチ画像の位置を変更してみます。


content-single.phpを直接してもよいのですが、今回はWordPressのダッシュボードから修正をおこないます


今回は、以下のように変更をおこないます。

  • アイキャッチ画像をタイトルの下にする

content-single.phpの修正画面をWordPressのダッシュボードで開きます。

まずは、テーマの更新ウィンドウをひらきます。

テーマエディタのひらきかた

テーマエディタが開いたら、右メニューでcontent-single.phpを選択します。

ダッシュボードでcontent-singleをひらく

アイキャッチ画像は、以下のコードで表示しています。

6行目から12行目の部分です。

<article id="post-<?php the_ID(); >" <?php post_class(); ?>
    <?php
    $featured_image_args = array(
        'class' =&amp;amp;gt; 'single-featured',
    );
    if ( is_page_template('page-fullwidth.php') ) {
        the_post_thumbnail(
       '    sparkling-featured-fullwidth', $featured_image_args);
    } else {
        the_post_thumbnail(
            'sparkling-featured', $featured_image_args);
    }
    >


the_post_thumbnailでアイキャッチ画像を表示しています。

このコードをタイトルの下に移動すればよいです。

正確には、メタ情報(作成日時、作成者、など)の下に移動します。


変更後のcontent-single.phpは以下になります。(一部抜粋)

<div class="post-inner-content">
<header class="entry-header page-header">
<h1 class="entry-title "><?php the_title(); ?></h1>
<div class="entry-meta">
<?php sparkling_posted_on(); ?>
<?php
    $categories_list = 
        get_the_category_list(esc_html__( ', ', 'sparkling' ) );
    if ( $categories_list && sparkling_categorized_blog() ) :
    ?>
    <span class="cat-links"><i class="fa fa-folder-open"></i>
    <?php printf( esc_html__(
        ' %1$s', 'sparkling'), $categories_list ); ?>
    </span>
    <?php endif; // End if categories ?>
    <?php if ( get_edit_post_link() ) : ?>
    <?php
        edit_post_link(
            sprintf(
            /* translators: %s: Name of current post */
            esc_html__( 'Edit %s', 'sparkling' ),
            the_title(
                '<span class="screen-reader-text">"', '"</span>', false )
            ),
            '<i class="fa fa-edit"></i><span class="edit-link">',
            '</span>'
        );
 ?>
<?php endif; ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<?php
    $featured_image_args = array(
        'class' => 'single-featured',
    );
    if ( is_page_template( 'page-fullwidth.php' ) ) {
        the_post_thumbnail(
            'sparkling-featured-fullwidth', $featured_image_args);
    } else {
        the_post_thumbnail(
           'sparkling-featured', $featured_image_args);
    }
?>
<div class="entry-content">

34行目から43行目までがアイキャッチ画像の表示部分です。

その直前がメタ情報、直後がコンテンツ本体です。


最後に、ファイルを更新ボタンを押下すれば更新完了です。

content-single.phpの更新方法

変更後のアイキャッチ画像位置を確認

ここまでの作業でアイキャッチ画像の位置は変更されています。


既にアイキャッチ画像が設定されている記事を確認してみてください。

アイキャッチ画像がタイトルの下(正確にはメタ情報の下)になっていれば、更新完了です。

アイキャッチ画像位置の変更後

固定ページのアイキャッチ画像位置を変更する


「content-single.php」の修正をおこなうと投稿ページのアイキャッチ画像位置はタイトル下になるのですが、固定ページのアイキャッチ画像位置は変更されません。
変わらず、タイトルの上にアイキャッチ画像が表示されます。


固定ページのアイキャッチ画像位置を修正するには、「content-page.php」を修正する必要があります。
「content-single.php」の時と同じようにテーマエディタと「content-page.php」をひらきます。

content-page.phpをテーマエディタでひらく

<h1>~</h1>を囲んでいる<head>~</head>の上にサムネイル表示処理が記載されていると思います。
以下のように。

<?php
if ( is_page_template( 'page-fullwidth.php' ) ) {
    the_post_thumbnail(
        'sparkling-featured-fullwidth', array(
            'class' => 'single-featured',
        )
    );
} else {
    the_post_thumbnail(
        'sparkling-featured', array(
            'class' => 'single-featured',
        )
    );
}
?>

<div class="post-inner-content">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header page-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!-- .entry-header -->

これは以下のように修正します。
<head>~</head>の下に、サムネイル画像表示処理を記載するように変更します。

    <header class="entry-header page-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!-- .entry-header -->
<?php
if ( is_page_template( 'page-fullwidth.php' ) ) {
    the_post_thumbnail(
        'sparkling-featured-fullwidth', array(
            'class' => 'single-featured',
        )
    );
} else {
    the_post_thumbnail(
        'sparkling-featured', array(
            'class' => 'single-featured',
        )
    );
}
?>

上記のように対応することで、固定ページもタイトルの位置にアイキャッチ画像が表示されるようになります。


月毎・カテゴリ毎・タグ毎ページのアイキャッチ画像位置を変更する


ここまでの説明でPHPファイルを修正しとしても、月毎・カテゴリ毎・タグ毎といった、集約ページのアイキャッチ画像位置は修正されていません。
集約ページのアイキャッチ画像位置を修正するには、「content.php」を修正する必要があります。

content.phpを修正

集約ページは、選択した月やカテゴリ・タグが<h1>~</h1>で使用されます。
タイトルは<h2>~</h2>となります。


なので、サムネイル画像を<h2>~</h2>の下に移動します。


変更前は以下のPHPファイルになります。
<h2>~</h2>の上にサムネイル画像表示処理が記載されています。

        <?php
        if ( is_page_template( 'page-fullwidth.php' ) ) {
            the_post_thumbnail(
                'sparkling-featured-fullwidth', array(
                    'class' => 'single-featured',
                )
            );
        } else {
            the_post_thumbnail(
                'sparkling-featured', array(
                    'class' => 'single-featured',
                )
            );
        }
        ?>
    </a>
<div class="post-inner-content">
    <header class="entry-header page-header">
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

サムネイル画像表示処理を、<h2>~</h2>の下に変更します。

<div class="post-inner-content">
    <header class="entry-header page-header">

        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <?php
        if ( is_page_template( 'page-fullwidth.php' ) ) {
            the_post_thumbnail(
                'sparkling-featured-fullwidth', array(
                    'class' => 'single-featured',
                )
            );
        } else {
            the_post_thumbnail(
                'sparkling-featured', array(
                    'class' => 'single-featured',
                )
            );
        }
        ?>

上記のように対応することで、集約ページもタイトルの位置にアイキャッチ画像が表示されるようになります。


まとめ

いかがでしたでしょうか?

アイキャッチ画像位置の変更できたかと思います。

まとめ
  • アイキャッチ画像は、デフォルトでタイトルの上に表示される。
  • アイキャッチ画像の位置を変更するには、PHPファイルを修正する必要あり。

僕のWordPressのテーマはSparklingですが、他テーマも基本的な変更方法は同じです。

アイキャッチ画像の活用にお役に立てればと思います。


それではまた!