ベストセラー人気 WordPress テーマTop 30 詳細

WordPress 記事とページに副題を追加する

Last Updated:2022年8月24日| 7のコメント

副題を追加して読者の興味を引き起こす
WordPressでは、プラグインを使用するか、カスタムフィールドを使用してサブタイトルを追加できます

タイトルの下にサブタイトルを表示すると、読者の不思議を引き起こし、本文を読むように促すことができます。 メディアサイトでは、読者の注意を引くために副題を使用することがよくあります。 海外ブログでも副題目を効果的に活用するサイトにしばしば接することになります。

WordPress 記事とページに副題を追加する

WordPress 記事やページ、カスタムポストタイプにサブタイトルを表示したい場合は、Secondary Title、WP Subtitleなどのプラグインを使用できます。

WordPress 記事とページに副題を追加する方法

サブタイトルを表示する方法としてカスタムフィールドを追加してから、テーマファイルを編集して、目的の場所(記事のタイトルの下など)にそのフィールドを表示できます。

簡単な方法で、プラグインを使用することができます。

Secondary Titleプラグインを使用して投稿とページにサブタイトルを追加する

サブタイトルを表示するプラグインとして 二次タイトルWP字幕 プラグインがあります。 Secondary Titleは、ポスト、ページ、カスタムポストタイプの記事に代替タイトルを追加するシンプルで軽いプラグインで、自動的にまたはショートコードまたはPHPを使用してタイトルを表示できます。

WordPress 管理者ページ » プラグイン » 新規追加で「Secondary Title」を検索して、この無料のプラグインをインストールできます。

プラグインを有効にすると 設定 メニューの下に "二次タイトルサブメニューが追加されます。 設定 » Secondary Titleに移動していくつかの設定を行うことができます。

WordPress 記事とページに副題を追加するプラグイン

General Settings(一般設定) 下の Auto show(自動表示) オプションでは、サブタイトルを自動的に表示するかどうかを選択できます。

Title format(タイトル形式) オプションでタイトルが表示される形式を指定できます。 次のパラメータを使用できます。

  • %title% - 基本タイトル
  • %secondary_title% - サブタイトル

サブタイトルが自動的に表示されるように選択すると、ここで指定した形式がタイトルに置き換えられます。 タイトルのフォーマットにはHTMLタグを使用できます。 例:

<span style="color:#ff0000;font-size:14px;">%secondary_title%</span>

簡単なCSSを使用して、サブタイトルがデフォルトのタイトルの下に表示されるようにすることもできます。 例:

%title%<span style="color:gray; font-size:17px;display: block; margin-top: 10px; border-left: gray solid 5px; padding-left: 5px;">%secondary_title%</span>

タイトルフォーマットにタイトル形式を指定すると プレビュー セクションにプレビューが表示されます。

WordPress 記事とページにサブタイトルを表示するプラグイン

Auto show(自動表示) オプションを オフに設定すると、目的の場所に副題を入力できるようにPHPコードが表示されます。

WordPress 記事とページに副題を追加する3

テーマファイルを直接変更する場合は、サブタイトルが表示される場所に次のPHPコードを追加してください。

<?php echo get_secondary_title(); ?>

GeneratePress テーマにはフックを使用お好みの場所に簡単に追加できます。

WordPress GeneratePress テーマフック

設定 » Secondary TitleDisplay Rules(表示ルール) セクションで Only show in main post オプション Onを選択して、サブタイトルがメインブログロールにのみ表示されるようにします。

WordPress 記事とページに副題を追加する4

個々の記事またはページにサブタイトルを入力できるようになりました。

WordPress 記事やページに副題を追加する方法

ブロックエディタの設定パネルに表示 二次タイトル フィールドに副題を入力します。 サブタイトルにはHTMLタグを追加できますが、自動的に表示する場合にのみタグが機能し、手動で表示する場合は機能しません。

カスタムフィールドを使用してサブタイトルを表示する

別の方法でカスタムフィールドを使用できます。 WordPressが提供するカスタムフィールド機能を使用して、「subtitle」(例)カスタムフィールドを追加します。

WordPress カスタムフィールド

次のコードを使用して、カスタムフィールド値をフロントエンドに表示できます。

<?php 

global $post;
 
$subtitle = get_post_meta($post->ID, 'subtitle', true);
 
if ($subtitle) { ?>
 
<p><? echo $subtitle; ?></p>
 
<?php 
 
} else { 
// do nothing; 
}
 
?>

この方法では、サブタイトルのHTMLタグ(例: )を追加できます。 そして、表示されるスタイルをCSSに調整できます。

ACFプラグインがインストールされている場合は、カスタムフィールドを追加してテキストフィールドを次のコードで表示(出力)できます。 詳細な方法は ACFプラグイン文書を参照してみてください。

$value = get_field( "text_field" );

if( $value ) {
    echo $value;
} else {
    echo 'empty';
}

参照


7のコメント

コメント

  1. 안녕하세요, gp프리미엄 테마중 인포테마를 사용중에 있는데요.

    본 포스팅을 보고 hook을 설정했는데 저는 왜 html태그가 적용되지 않은 상태로 표시되는데요. ㅠ.ㅠ

    부제목이 나오지 않고 세컨더리 타이틀에 설정한 그 모습 그대로 나와요.

    실생활에 필요한 경제금융용어 아주 쉽게 알려드려요한계비용의 뜻은 무엇일까요?

    이런식으로요. 어떤게 잘못되었을까요?

    応答
    • 안녕하세요, 워프님. 제 블로그의 일부 글에 (이 글의 설명대로) 테스트로 부제목을 추가해보았습니다. 이 글을 포함하여 모두 제대로 표시되고 있습니다. 커스텀 필드에 부제목을 입력하실 때 줄바꿈은 br 태그를 사용해보시기 바랍니다.

      応答
      • 워드님 포스팅이 잘못되었다는 이야기는 아니구요^^;

        현재 제 워프에서는 오토로 하는 경우 태그가 정상적용되어 세컨드리 타이틀이 나오는데요.

        오토옵션을 끄고 제가 원하는 자리에 훅으로 넣거나 숏코드를 넣으면 태그 적용이되지 않고 글쓸 때 적었던 세컨드리 타이틀이 그대로 표시되는 문제의 해결방법을 여쭙고자 문의드린거에요^^;

        오해없으셨으면 좋겠습니다.

      • プラグイン을 사용하셨나요? プラグイン에서 부제목에 html 태그가 들어갈 경우 줄바꿈이 되는지 여부는 확인해보지 않았습니다.
        만약 br 태그가 작동하지 않는 경우라면, #BR#과 같이 br 태그를 추가하고, 자바스크립트나 PHP를 사용하여 #BR#을 br 태그로 바꾸는 것도 가능할 것 같습니다.

  2. カスタムフィールドと GeneratePress テーマが提供するフックを活用してこのブログに副題を追加してみました。 新しく作成した記事には、なるべく副題を追加して表示する予定です。

    応答
WordPress Naver カフェを訪れる

ありがとうございます!