4rem;background: fdfdfd;border:0;border-radius:6px;box-shadow:0 5px 5px 0 rgba 18,63,82,. 各投稿にショートコード等を貼り付けることもなく、 プラグインを有効化するだけで各投稿の末尾に関連記事を設置できます。 また、どれくらいクリックされたかという統計情報も管理できるので、サイトの回遊率改善にもつながるはずです。 下記はBootstrapのみで動作します。
今回の記事は以上です。
WordPressのテーマを編集する方法 ここまでプラグインを使う方法を紹介しましたが、プラグインを使わなくてもWordPressのテーマを編集することで関連記事を表示できます。
設定が完了したら、設定画面の下にある「保存」ボタンをクリックしてください。
関連記事の画像のサイズを変えたり、文字のサイズを変更することが可能です。 はてなブログでは、記事ページ(個別記事のパーマネントリンク表示)の本文下(ソーシャルパーツを表示していればその下)に、関連記事を表示するようにしました。 オフにする方法 新しく導入された関連記事表示は、初期設定ではオンになっています。
このくらいのデザインが適度で良いような気もします。
インストール直後は表示する関連記事の数や、「この記事を読んだ人はこんな記事にもご興味があるかも」部分の表記変更画面が表示されます。
目立たせたいときに使うと良いかもしれませんね。
くどい印象にならないよう、見出しはシンプルなデザインにしています。 また、アイキャッチ画像がない場合はNo imageのデフォルト画像がでるようになっています。 チェックを入れると「表示設定 ウェブサイト用」と同じような設定変更画面が表示されます。
2関連記事の表示件数 表示件数もお好みで切り替えが可能です。 今回は、WordPressで関連記事を表示することができるプラグイン、Yet Another Related Posts Pluginの使い方を紹介します。
大石ゆかり 教えてください!! WordPress Related Postsとは ブログなど記事の下部に関連記事を簡単に表示できるプラグインです。
ただし、エラーが起きて画面が真っ白になって動かない…なんてこともありますので、 必ず事前にサイトのバックアップを取っておいたり、PHP・CSSの変更前内容の保存を行っておきましょう。
ホームページ作成のヒントは「グーペ」のWebメディアで ホームページをつくる上でのヒントや小ワザを、ホームページ作成サービス【グーペ】のスタッフがご紹介! 書いている人は、Webディレクター、デザイナー、エンジニア、カスタマーサポートと職種もいろいろ。
7まずは、「Basic settings」ですが、ここでは見出しと表示する記事数を設定します。 影もつけています。
カスタマイズの設定方法 Yet Another Related Posts Pluginがインストールされると、サイドバーの設定表示が以下のように変更されます。
php」を選択し、表示したい部分に下記コードを追加します。
あいにく僕は非公式パーツを使っていないので今回は表示速度比較は行いません。 ・WordPress Related Postsはサムネ付き関連記事を簡単に表示することができ、また記事の取得について自動・手動の選択ができる。
10ただし、どれも各記事に アイキャッチ画像をしているとき用のデザインです。 どなたかが比較記事を書いて頂ければ、ここに追記(リンク)しようと思います。
アフィリエイトサイトなどで大量にページを作る場合は、こちらの方法が手間がかからないのでおすすめです。
ご了承ください。
インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。 Yet Another Related Posts Pluginをインストールして、有効化してください。
「関連記事」を活用すれば、サイトの隅々まで読者を誘導できるです~。
。
YARPPと略されることもあります。
表示設定 ウェブサイト用 関連記事の表示のされ方(簡単なレイアウト)を変更することができます。 そのブログに投稿された記事から、 表示中の内容に関連するとみられるものを最大5件まで、一覧形式で表示します。 その次は、「Advanced settings」ですが、ここではデザインや表示する項目を設定します。
16表示形式などに加え、クリック率やPVなども確認することができるので、回遊率などが気になる方にはおすすめのプラグインと言えます。 Archive• SEO対策などセットで利用したい場合にオススメ。
ソースコードで表示位置を指定する場合 PHPのコードで表示位置を変更したい場合は、下記のソースコードを直接記述しましょう。
ただし多様な機能を持っている分、設定項目がたくさんあるため 初心者には扱いにくく感じられる かもしれません。
WordPress専用:関連記事を表示するPHPコード 下記をコピペで動きます。 というわけで、プラグインなしでWordPressサイトに関連記事を表示するスクリプトをまとめました。 そのため、訪問者の目に留まりやすい新しい投稿とは対照的に、アーカイブページの奥に埋もれた古い投稿は、サイト内で アクセスされるチャンスが減ってしまいます。
19「関連記事」という見出しのデザインも合わせて変えてみました。 その際にも特別なスキルは必要なく、 ドラッグ&ドロップの直感的な操作だけで自由な編集が可能です。
少しクドく見えてしまうかもしれませんね。
カスタマイズ前 初期設定では、上のようなデザインになっているかと思います(テーマにより見出しや配色に差があります)。