WordPressの「人気記事」・「関連記事」表示に、プラグインを利用している方は多いと思います。, ですが、今回、上記のプラグインの利用をやめ、自作で、これらのウィジェットを作成しました。, そこで、今回の記事では、プラグインの利用をやめた理由と、「人気記事」・「関連記事」ウィジェットを、作成する手順について、順に解説していきます。, 上述している通り、当ブログでは、今まで「人気記事」・「関連記事」を表示させるのに、プラグインを利用していました。, ですが今回、プラグインを使わずに「人気記事」・「関連記事」を表示させるようにしました。, 当ブログで利用していたプラグイン「Wordpress Popular Posts」・「Linkwithin」では、表示させる記事を独自に選ぶことができませんでした。, なので、自分で選んだ記事を表示させるために、プラグインの利用をやめ、自分でウィジェットを作成することにしました。, プラグインを使うことで、表示させる記事情報(記事タイトルやサムネイル画像)を、動的に取得して表示していました。, ですが、プラグインを使わずに、表示させる記事情報を固定で保持しておくことで、動的に取得するといった工程が無くなるので、ページ表示速度の高速化を期待できます。, プラグインは、非常に便利なのですが、どうしてもその仕様に合わせて使う事を求められます。, そして、もしカスタマイズしたいとなった場合、PHPやWordpressの関数など、ある程度の知識・技術がいります。, ですが、プラグインを使わず自分でウィジェットを作成することで、当然ですが、カスタマイズを容易におこなうことができます。, 当章では、「人気記事」を表示させるウィジェットの作成手順を、順に解説していきます。, 当ブログでは、「人気記事」を、サイドバーに表示させていて、表示内容はブログ全体で統一しています。, なので、自分で表示させる記事を選定して、それらを固定で表示させるようにすれば、わざわざプラグインを利用する必要はありません。, ※赤文字部分は、あなたのブログ記事情報に変更してください(記事2以降も、記事1と同様) , 上記を参考に、HTMLを記載したら、Wordpressの管理画面メニュー「外観」→「ウィジェット」を選択して、, ウィジェット画面が開いたら、「メインサイドバー」に「テキスト・ウィジェット」を設定してください(下図参考), あとは、先ほど記載したHTMLを、この「テキスト・ウィジェット」にコピペすればOKです。, 具体的には、テーマ・テンプレートのstyle.css に、人気記事部分のスタイルを追記していきます。, 【wordpress/wp-content/themes/●●●/style.css】, /* LI – post container */ こんな感じの記事をよく見かけるのですが、そんなことはないよっていう記事です。   margin-top: 5px; }, .Related-article-title{ これで、下記のように「人気記事」が表示されるようになるでしょう。 WordPressの「関連記事」ウィジェットを、プラグインなしで作成する手順. font-weight: bold;  case ‘9’: }, /* thumbnail styles */ $categories = get_the_category($post->ID); switch ($categories[0] -> cat_ID){ , よく読まれる関連記事
, , ”記事1のタイトル”,
記事1のタイトル
,
, ”記事2のタイトル”,
記事2のタイトル
,
, ”記事3のタイトル”,
記事3のタイトル
, 以上が、関連記事の内容になります。 padding: 20px 0 5px; 30代からのプログラミング学習は、遅いわけでもないけど、余裕があるわけでもないです。むしろ、余裕がない分必死になって勉強するので、覚える確率は高いと思い... 「プログラミング上達のコツを知りたいなぁ…。バグにハマっていると3時間くらい経過するし、これじゃ1日がすぐに終わるよ…。どうしたらいいんだろう…。」←こういった疑問に答えます。本記事では効率的にプログラミング上達するコツを解説しました。, 『プラグインなし』WordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】, Track post views without a plugin using post meta. }, 当章では、上記のように「関連記事」を表示させるウィジェットの作成手順を、順に解説していきます。, 「Linkwhithin」を利用していた時は、「関連記事」を、記事の最後に表示させていて、表示内容は、記事ごとに「関連のある記事」を、自動選定して表示していました。, 「記事のカテゴリと、同じカテゴリ内の記事を、自分で選定して表示させる」ようにしていきます。, なので、「PHP」の知識も多少必要になります(記事のカテゴリごとに、表示させる関連記事を変更させる必要があるため), 【wordpress/wp-content/themes/●●●/single.php】, 「single.php」には、記事(投稿)ページの、表示フォーマット(テンプレート)が定義されています。, なので、このファイルの任意の場所に、「関連記事」を表示させるウィジェットを設定する必要があります。, font-family: arial; width: 106px; ‘/Related-article.php’ ); ?>, 今回は、「Related-article.php」というファイルを追加して、このファイルに定義しています(下記), 【wordpress/wp-content/themes/twentytwelve/Related-article.php】, ※赤文字部分は、あなたのWordpress記事情報に変更してください(記事2、3も、記事1と同様) height: 165px; 色んなブログを見ていると、よく人気記事の一覧がサイドバーなどに表示されていることがあります。WordPress Popular Postsなどのプラグインを使えば簡単に実装することができますが、今回はプラグインなしで人気記事 … まとめ:プラグインなしで簡単!WordPressの固定ページに新着記事一覧ページを表示させてみよう. 『プラグインなし』で人気記事一覧を出力する方法【WordPress】 https://ift.tt/2GZKyhL – manablog posted on 2018-01-20. WordPressで記事を新着順ではなく人気順・ページビュー数順で表示するためのソースコードをメモしていきます。プラグインを使用しなくてもかなり簡単に実装できちゃいます。ざっくりとした実装の処理内容は以下の流れとなります。 記事 …   echo $xxx; 当章では、上記のように「関連記事」を表示させる …   echo $RelatedArticle;  default: border-left-color: rgb(221, 221, 221); border-left-width: 1px; }, .Related-article-img{   echo $xxx; line-height: normal; プログラミングには向いている人と向かない人がいる。適正もあるので、出来る人は限られている。 float: left; 学歴、職業、結婚、収入、役職、マイホーム...など。 .post-stats {   break; }, 上記の赤文字部分「case ‘1’:」に設定する数値は、カテゴリIDを設定してください。, カテゴリID は・・・Wordpressの管理画面メニューから「投稿」→「カテゴリー」を選択して、, カテゴリ一覧画面を開いたら、カテゴリIDを確認したい「カテゴリ名」を選択してください(下図参考), すると、下図のような画面が開くので、そのURLの「category&tag_ID=●●」といった部分を確認してください。, また、「echo $RelatedArticle;」ですが、こちらは、上記で定義した「関連記事の内容:$RelatedArticle」を、表示する。といった処理になります。, なので、下記の場合、記事のカテゴリIDが「1」の場合は、「$RelatedArticle」に定義した関連記事を表示させる。といった処理内容になります。, あなたのWordpressブログに、複数のカテゴリを設定している場合は、上記を参考に、ソースを追記していってください。, 【wordpress/wp-content/themes/twentytwelve/style.css】, .Related-article{ 色んなブログを見ていると、よく人気記事の一覧がサイドバーなどに表示されていることがあります。WordPress Popular Postsなどのプラグインを使えば簡単に実装することができますが、今回はプラグインなしで人気記事を表示させる方法をご紹介したいと思います。, まずは、functions.phpに以下のコードを追加します。コピペで大丈夫です。, 「viewCount」というカスタムフィールドを追加して、ここに閲覧数を格納してカウントしていきます。, 投稿IDをfunctions.phpで定義したsavePostViews関数に渡すことで、記事毎の閲覧数がviewCountに格納されます。, ループの条件で、meta_keyにviewCountを指定し、降順に並べることで閲覧数の多い順に表示しています。, プラグインを使わずに人気記事を実装してみたいという方は、ぜひ参考にしていただければ幸いです。, 投稿や固定ページをクリック一発で複製できるようになるWordPressプラグイン「Post Duplicator」, HTMLやPHPのコードを登録して投稿や固定ページ内で呼び出すことができるWordPressプラグイン「Post Snippets」, table-layout:fixed;を指定してもテーブルのwidthがうまく効かない場合の対処法. 記事タイトル3 display: block; float:left; }, /* Stats tag styles */ clear:left; }, .Related-article-headline{ clear: both; border-left-style: solid; ”記事タイトル2”,
}, .Related-article-dt{ display:block; font-family: ‘Lora’,Georgia,”Times New Roman”,Times; border:none; margin:0 5px 0 0; 一番しっくりくるのは『収入』が少ないと『負け組』みたいなわけわからん風潮でしょうか。 ,
  • }, google adsense(グーグルアドセンス)とは?アカウント登録(審査申請)方法と、収入(報酬)を上げるポイント, CSRF(クロスサイト・リクエスト・フォージェリ)とは?その仕組みと対策方法について, Chromeで閲覧サイトのCookie情報を確認する方法と、編集・削除・追加する方法も, curlコマンドの使い方 ~GET、POST、REST(json)の確認と、windowsでの利用手順, 「Advanced REST client」の使い方まとめ ~GoogleChromeの拡張ツール, WordPress(ワードプレス)のseo対策で、おすすめのプラグイン、テーマ・テンプレートと、やっておくべ設定, ブランディングの意味とは?企業(会社)や自分(セルフ)のブランドイメージ戦略(手法)は、ブログやデザインが重要, インバウンド(inbound)マーケティングとは?ソーシャルメディア活用など、BtoBの会社(企業)が知るべきWeb事例, WordPressとは?ワードプレスのインストール方法・使い方と、オススメの無料テーマ(テンプレート)・プラグイン紹介, メルマガ(メールマガジン配信)の開封率を上げるテンプレート素材(無料・HTML版)の作成(作り方)と、文章の書き方とは, コンテンツ(インバウンド)マーケティングとは?seoとも相性の良い「最新webマーケティング」のセミナー内容について, Web(ネット)マーケティングとは?ウェブコンサルティングのプロが、セミナー(講座)で言った、企業ブログの運営手法, ランディングページとは?landing pageの作り方(制作手順)と、LPO対策で重要な8つのポイントをまとめてみた, ネオヒルズ族とは?ネオヒルズ族の稼ぎ方で問題になっている点や逮捕事例についてまとめてみた, キャッチコピーとは?読者の注目を一瞬で惹きつけるキャッチコピーの作り方をまとめてみた, 文章の書き方で4つのポイントを守ったら、1記事で1日500人以上の方に読まれるようになった, Google対策に必須!ウェブマスターツール(WebMasterTool)へのサイト登録と基本的な使い方, ハッキング対策まとめ!自分のサイトを守るためにやっておかなければならない10のこと.

    マイクラ コマンド本 作り方 38, ミュウツーの逆襲 動画 フル 18, ジャルジャル 福徳 ゆり やん 10, 相棒 ピルイーター 感想 5, ポツンと一軒家 広島 三原 32, 並木 統合 やり方 19, 素敵な ご縁に感謝 英語 48, Sara Sarah 違い 5, バイト シフト入っ てる か わからない 8, 運動 消費カロリー 一覧 厚生 労働省 42, ドラマ 101回目のプロポーズ 別れの曲 6, Peach 曲 ジャニーズ 29, 法学部 に 入る メリット 5, ポケダンdx 進化 主人公 4, シェル ハイオク 種類 12, Discord モンスト Bot 44, 皆さん 応援よろしくお願いします 英語 10, 松浦勝人 若い頃 画像 5, 芸能人 仮面夫婦 ランキング 5, 矜り 誇り 違い 7, サラメシ 三橋 達也 12, Spi 福岡 市役所 6, 秦拓馬 自宅 住所 26, キンプリ ティアラ マナー 17,