WordPressで記事に「続きを読む」を設定する方法【初心者向け】

2017年4月29日(土)
TechAcademy

WordPressで作成したサイトのデザインにもよりますが、TOPページや記事の一覧ページには、記事の一部を表示して「続きを読む」に誘導することも多いのではないでしょうか。

そこで、今回は初心者向けに「続きを読む」を設定する方法を紹介します。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

20160620

田島メンター!!よく「続きを読む」ってなっていて、クリックすると表示されるようになっている記事があると思うんですけど、あれってWordPressでもできるんですか・・・?

20163020-2

できるよ。「Moreタグ」っていうのを使うとできるんだ。

20160620

「Moreタグ」ってどうやって使うんですか〜?

続きを読むの設定方法

続きを読むの設定は、記事を書く画面から可能です。

「続きを読む」を表示させたいところで、下記の画像のように「Moreタグの挿入」のボタンをクリックします。

moreタグ

なお、「Alt + Shift + T」のショートカットで追加することも可能です。

このボタンをクリックすると、記事の途中で線が引かれ、右側に「More」と表示されることが確認できます。

moreタグ挿入完了

なお、表示をビジュアルから「テキスト」に変えると「<!–more–>」のタグが挿入されていることがわかります。実際にどんなタグになっているかは理解しておくと良いでしょう。

テキスト

ここまでできたら、記事の一覧ページなどで確認します。

続きを読む

先ほどMoreタグを追加した前までが文章で表示され、それ以降は表示されず、「続きを読む」のリンクが追加されたことがわかると思います。

この「続きを読む」をクリックすると、記事の全体が表示され、そこには続きを読むのリンクは表示されません。

記事一覧などで、「続きを読む」をクリックして記事を読んでもらわなければ意味がありませんので、「続きを読む」の前に、記事の要約や続きを読みたくなるような内容を含んでいるとより良いでしょう。

続きを読むを削除する方法

「続きを読む」の場所を間違ってしまった、あるいはサイトのデザインが変わったから削除したいということもあるでしょう。

削除の方法は簡単です。

まずは挿入した「More」をクリックしてください。

more削除

ここで「Delete」キーをクリックすると消えます。これだけで削除は完了です。記事一覧ページなどで確認すれば消えていることがわかります。

また、場所を変える場合は、再度新しいところでMoreタグを追加してください。

今回は以上です。

さらにWordPressを使いこなしたい場合は、WordPressでパーマリンクを設定する方法も合わせてご覧ください。

20160620

「続きを読む」ができました!

20163020-2

一覧が表示してあるところに要約を持ってくることで、見に来た人により興味を持ってもらう効果がある反面、記事の書き方にも注意が必要だね。

20160620

そうですね!

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。


TechAcademyマガジンは、オンラインのプログラミングスクールTechAcademyが運営する教育×ITに関するWebメディアです。トレンドや最新情報など役に立つ記事を発信しています。
https://techacademy.jp/magazine/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています