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

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ですが、他テーマも基本的な変更方法は同じです。

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


それではまた!



sakusaku

都内でSIerをやっています。 使用している技術は、Java、PHP、MySQL、PostgreSQL、Oracle、Apache、Tomcat、あたりです。 Pythonやってみたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください