HOME　→　3 WordPress　→　
投稿日:

WordPress 記事の折りたたみ「アコーディオンメニュー」の実装要領

WordPress Twenty Seventeen
記事の折りたたみ
アコーディオンメニューの実装要領
 
 

　「アコーディオンメニュー」とは
　ナビゲーションメニューのひとつで、指定部分をクリックするたびに楽器のアコーディオンのように開いたり閉じたりすることで、 隠れているコンテンツを表示させたり非表示にしたりすることことができるもので、「トグルメニュー」とも言われる。

 
アコーディオンメニューでの表示例
 
以下、WordPress に記事を折りたたむ「アコーディオンメニュー」を実装した記録。
HOME　→　3 WordPress　→　
投稿日:

ボタンクリックで表示内容を切り替える

WordPress Twenty Seventeen
記事の作成
ボタンクリックで表示内容を切り替える
 
WordPrerss で記事を投稿している際に、表示内容を「選択」によって切り替えたいケースがある。この場合、「jQuery」を使用すると【クリック動作】で記事の表示内容を切り替えることが出来る。
 
「昇順リスト」ボタンをクリックしたときの「投稿日＜昇順＞記事一覧」。
 
以下に、「jQuery」による表示内容の切り替え要領を記録。
HOME　→　3 WordPress　→　
投稿日:

Simple GA Ranking サムネイル表示速度の改善

WordPress Twenty Seventeen
Simple GA Ranking のカスタマイズ
サムネイル表示速度の改善
 
【PageSpeed Insights】を実行すると、改善できる項目のトップに「適切なサイズの画像」項目があり、対象になっている画像の全てが『Simple GA Rankinng』で人気記事一覧を表示している【サムネイル画像】であることに気付く。
 
改善できる項目のトップに、「適切なサイズの画像」項目があり、内容を見ると全ての画像が、『Simple GA Rankinng』で人気記事一覧を表示している【サムネイル画像】であることに気付く。
 
以下、『Simple GA Rankinng』で表示する【サムネイル画像】のサイズを変更した記録。
HOME　→　3 WordPress　→　
投稿日:

OAuth（オーオース）認証の理解と認証情報の取得要領

WordPress Twenty Seventeen
OAuth（オーオース）認証の理解
認証情報の取得要領
 
WordPressに「Simple GA Ranking」プラグインを導入し、人気記事一覧を表示しようとすると「OAuth（オーオース）認証の取得」が必要となる。ところが、この「認証情報」の取得要領が複雑で、且つ、解りにくい。
 
ユーザーの確認が完了すると、「アクセストークン」が発行される
 
以下「Simple GA Ranking」の導入を機に、OAuth（オーオース）認証についての理解と認証情報の取得要領を解り易くまとめた。
HOME　→　3 WordPress　→　
投稿日:

Simple GA Ranking サムネイルとランキング順位の表示

WordPress Twenty Seventeen
Simple GA Ranking のカスタマイズ
サムネイルとランキング順位を美しく表示
 
「Simple GA Ranking プラグイン」を利用して、人気記事一覧をサイドバーに表示すると、Googleアナリティクスのデータを利用してランキングが算出されるのでサーバへの負荷を抑えることが出来る。しかし、「Simple GA Ranking」を導入しただけでは、ランキング順位が枠外に表示され、サムネイルは表示されない。
 
「Simple GA Ranking」を導入しただけでは、ランキング順位が枠外に表示され、サムネイルは表示されない
 
以下、Simple GA Ranking での人気記事一覧を、カスタマイズした記録。
HOME　→　3 WordPress　→　
投稿日:

投稿日順 記事一覧表示用 2種類の ショートコード

WordPress Twenty Seventeen
固定ページでの 記事一覧の作成
2種類の ショートコード
 
投稿記事が多くなってくると、記事の見直しやサイトの移行等に当たって、『いろんな角度』からの「記事一覧」が欲しくなってくる。
 
投稿日順 記事一覧サンプル
 
以下、ショートコードに関するおさらいと、ショートコードでの「投稿日順 記事一覧」の記録。
HOME　→　3 WordPress　→　
投稿日:

記事上に カテゴリー（パンくずリスト）を プラグインなしで表示

WordPress Twenty Seventeen
プラグインなしで
記事上に パンくずリスト（カテゴリー）を表示
 
投稿記事が多くなってくると、記事を修正したいときに対象記事を探すのに手間が掛かるようになる。
Twenty Seventeenでは、標準で記事下のコメント欄の上に、カテゴリーが表示されているが、記事下までのスクロールがメンドクサイ。
 
記事上に パンくずリスト（カテゴリー）を表示
 
そこで、記事上にもカテゴリー（パンくずリスト）を表示する事にした。
HOME　→　3 WordPress　→　
投稿日:

WordPress 人気記事一覧をサイドバーに表示

WordPress Twenty Seventeen
Simple GA Ranking プラグインによる
人気記事一覧をサイドバーに表示
 
　サイトを訪れてくれたユーザーに、『サイト内には、こんな人気記事もありますよ』と、人気記事をランキング順に表示してみることにした。
 
　但し、このサイトを運用しているサーバーが【 Raspberry Pi 】なので、これ以上ページの表示速度が遅くなるような負荷をかけるわけにはいかない。ググってみると、「Simple GA Ranking」というプラグインは、Googleアナリティクスのデータを利用してランキングを算出するため、サーバへの負荷が軽いとのこと。
 
しかし、Googleアナリティクスのデータを利用するための「Analytics設定」が、少々複雑であった。
トークンの取得が完了
 
以下に、Simple GA Ranking プラグインの設定要領を記載。
HOME　→　3 WordPress　→　
投稿日:

「お問い合わせ」 reCAPTCHA インテグレーションのセットアップ

WordPress Twenty Seventeen
Contact Form 7
メールフォームの スパム対策
 
Contact Form 7をバージョン 5.1へとアップデートすると、reCAPTCHA v3へ変更してくださいと表示される。
 
reCAPTCHA v3へ変更してくださいと表示される
 
以下に、Contact Form 7の reCAPTCHA を【v2→v3】に変更した方法を記録。
HOME　→　3 WordPress　→　
投稿日:

固定ページに 投稿日・更新日・投稿者を表示する

WordPress Twenty Seventeen
固定ページのカスタマイズ
投稿日・更新日・投稿者を表示する
 
固定ページには、タイトルは表示されているが、「投稿日・更新日・投稿者」は表示されていない。管理面・SEO面から、これらを表示することにした。
 
固定ページに 投稿日・更新日・投稿者を表示する
 
以下、固定ページへの「投稿日・更新日・投稿者」の表示要領。