タグ: WordPress

  • ブログにおけるプライバシーポリシーが必要となったとき

    ブログにおけるプライバシーポリシーが必要となったとき

    ブログをある程度運営していれば、やがてアドセンスを考える時が来ると思います。

    今現在では、Google Ad senceが最初の候補なってきますが、規約には「プライバシーポリシー」をわかりやすいところに掲載とておくことを求めています。

    以下の、ブロガーさんが最小限度の「プライバシーポリシー」の雛形を示されています。

    是非、必要になればご参考にしてください。当サイトでも、使用させて頂いています。

    【2019年コピペOK】グーグルアドセンスのプライバシーポリシーテンプレート(ひな形)書き方の例 2020年1月

    https://carbonjam.com/googleadsense/privacy-policy/
    編集履歴
    2020/01/30 はりきり(Mr)
  • [WordPress] 遅延読込プラグイン比較 – (1)Lazy Loader, (2)Lazy Load, (3)a3 Lazy Load (2020)  [2020/01/27]

    [WordPress] 遅延読込プラグイン比較 – (1)Lazy Loader, (2)Lazy Load, (3)a3 Lazy Load (2020) [2020/01/27]

    画像遅延プラグインの効果

    以下の3つの画像遅延ローダーをGoogleのPageSpeed Insightsのスコアで比較しました。

    画像遅延処理のPluginの有無でPageSpeed Insightスコアは、以下のように改善できた。

    結論

    結論から言うと今回の結果から、採用したPluginは、 「Lazy Load – Optimize Images Ver.2.3.2」です。

    評価方法

    例えば、以下のアドレスをGoogle Page Speed Insightsに入力して測定します。(https://harikiri.diskstation.me/myblog/wordpress/7804/)

    結果は、モバイル : 40程度 → 50程度

    少し長文のページのスコアも測定しました。

    結果は、モバイル : 25程度 → 35程度

    比較検討したPluginのバージョン

    • Lazy Loader Ver.5.1.2
    • Lazy Load – Optimize Images Ver.2.3.2
    • a3 Lazy Load Ver 2.2.2

    結果の概要

    Lazy Load と Lazy Loader

    Lazy Load >= Lazy Loaderと、PageSpeed Insightsスコアで若干の差があったが、ほぼ同等。

    ただし、Lazy Loadでは、連続でスコアを測定すると、だんだん良くなる傾向がある。cache関係で相性が良いのかもしれない。

    a3 Lazy Load

    パソコンでのPageSpeed Insightsスコアが高く出る傾向がある。長文の投稿ページでは、スコアの改善が殆どなかった。これからのPage作りは、モバイル・オリエンテッドなどで、パソコンでのスコアは、以下の通り良かったが、採用を見送ることにした。

    ルート(myblog) モバイル

    • モバイル : 35⇨57
    • パソコンで91が最大値。その他のPluginでは、モバイル55が最大/パソコンでは、90を超えない(87程度)

    ルート(myblog) 長文ページ

    • モバイル : 25⇨25
    • パソコン : 65⇨91

    まとめ

    これまでに、Autoptimize プラグインによるCSS, JavaScriptなどの最適化、WP-Optimizeによるcacheのによる最適化、EWWW Image Optimizerによる画像の軽量化を検討してきました。今回は、画像の遅延表示によるPageSpeed Insightsスコアの改善を検討しました。

    1. Autoptimizeプラグイン (Java Script, CSSおよびhtml最適化)
    2. WP-Optimize プラグイン(キャッシュのみ有効化)
    3. EWWW Image Optimizer (画像の縮小化)

    総合改善度

    まとめに記載したように、ごく最近まで速度に関するスコアについて知識がなかったため、関連するプラグインは、何も入れていなかった。そのときのスコアから現在までのスコアの改善度は、以下の通りです。

    まだまだですが、当初のことを思えば、劇的な改善度です。

    PageSpeed Insightsスコア: Plugin導入前からの変遷

    ルート(myblog)

    長文のページ

    • モバイル : 2~3 → 50程度
    • モバイル : (未測定) → 35程度

    以上

  • Google Search Console – PageSpeed Insightsを使う

    Google Search Console – PageSpeed Insightsを使う

    Google Search Console

    日々のアクセス状況(検索での表示回数、クリック回数、クリック率など)をグラフやテーブルで示してくれます。

    Google Search Consoleへの登録の仕方は、他のBlogerの皆さんに任せて、ここでは述べませんが、最近特に気になっている、ユーザーエクスペリエンスの向上のためのページの反応性の測定です。その測定のために、Google Search Consoleを頻繁に使っています。

    サイトの賑わいは、記事の内容、読み易さ、タイムリー性、あと、表示速度が主に考えられると思います。

    表示速度については、Googleは、スマートフォンを中心にページをデザインすべきであると言っています。どんどんPCではネットサーフィンしなくなり、スマフォかタブレットになっていますね。

    当サイトも、Synology NASにWordPressサーバーを立ち上げて、1年になりますが、GoogleにIndexしてもらうという意味もようやく分かり、この記事を書いています。

    Page Speed Insightの使い方

    まだ試験運用版とのことですが、サイトのペード毎に速度を測定できます。

    方法

    Google Search Consoleに飛び、左タグから「速度(試験運用版)を探しタップすると、「Page Speed Insights」のリンクが現れる。

    入力欄にサイトのページアドレスを入力し、分析をタップする。

    結果の見方

    しばらくすると、円グラフで、ページの総合的な速度評価(速度スコアは、Lighthouseでの測定に基くとあります)が表される。

    下方にスクロールすれば、測定結果と改善可能な問題に対する対策が示されています。自分のサイトの速度的な弱点を客観的に知ることができる。

    • フィールドデータ
    • Origin Summary
    • ラボデータ
      • First Contentful Paint (秒)
      • First Meaningful Paint (秒)
      • 速度インデックス(秒)
      • CPUの初回アイドル(秒)
      • インタラクティブになるまでの時間(秒)
      • 初回入力遅延の最大推定時間(ミリ秒)
      • ページが表示される様子を写真のスナップショットのように左か右へ10枚の画像で表示される(表示が早いと、左側から表示が始まる)
    • 改善できる項目 (改善可能な項目が表示される、短縮できる推定時間)
      • オフスクリーン画像の遅延読み込み(sec)
      • レンダリングを妨げるリソースの除外(sec)
      • 適切なサイズの画像(sec)
      • 使用していないCSSを削除指定ください(sec)
    • 診断 (減らせるデータ量)
      • ウェブフォント読み込み中のテキストの表示 (ms)
      • 静的なアセットと効率的なキャッシュポリシーの配信(ms)
      • メインスレッド処理の最小化(ms)
      • 過大なDOMサイズの回避(値)
      • JavaScriptの実行にかかる時間の低減(sec)
      • クリティカルなリクエストの深さの最小化(ms)
      • リクエストの数を少なく、転送サイズを小さく維持してください(KB)
    • 合格した監査(数)

    当サイトは、Synology NASでWordPressサーバーを個人的に立てているので、管理の行き届いたレンタルサーバーではないため、自分で反応速度などのユーザービリティを調整しないといけません。

    当サイトの反応速度の改善記事は、以下をご参照ください。

    [WP] Autoptimizeの威力 – ブログ・サイトのスピード改善対策プラグイン

    https://harikiri.diskstation.me/myblog/wordpress/7804/
  • [WordPress] プラグイン: GT3 Photo とTooltips は相性が悪い – [2020/01/21]

    [WordPress] プラグイン: GT3 Photo とTooltips は相性が悪い – [2020/01/21]

    プラグインの相性

    GT3 Photo GalleryはGutenberg editorで使用できるGallery pluginです。

    Tooltipsは、日本語と英語の混在でも、単語を適切にサーチして吹き出し化できるpluginです。

    Tooltipsを有効にしてある場合、GT3 Photoで20-30個の写真を投稿に入れると、管理画面からの保存も読み込みも著しくその速度は低下します。Tooltipsを無効にすると快適な速度に戻りました(2020/01現在)。

    2020/04現在は、AMPプラグインによりAMP対応にしました。AMP下、GT3 Photoプラグインは、綺麗に見せることが売りのプラグインであったため、AMPのルールである、JavaScriptの複雑なコードを許さないことから、エラーするコードが多くありました。

    そこで、GT3 Photoプラグインは外すことにしました。Tooltipsプラグインは、使っていませんが、現在は、同様の機能であるEncyclopediaプラグインを導入しています(2020/04現在)。

    2021/01/02, AMP対応を更に進めるために、AMPプラグインが検査してAMPに非対応であるとリストされるプラグインを極力アンインストールしようと思い立ちました。まずは、Encyclopedia(せっかく、有償版を購入したが)をアンインストールすべく、これまでに登録したキーワードを、普通の投稿(post)に置き換える作業を進めています。完了すればEncyclopediaはアンインストールする予定です。

    改善策は、Encyclopediaを使用することにしました。

    • 日本語・英語の混在でもいずれのワード種でも吹き出しが可能
    • GT3 Photoとの相性は悪くない

    CM Tooltip Glossary、GlossaryおよびLuckyWP Glossary,は、いずれも、日本語・英語の混在下では、英ワードを認識できない場合があります。具体的には、「is word単語」の場合、wordを認識できません。英語は単語の間に空白があり、日本語には空白がないことが原因だと考えられます。

    編集履歴

    2020/01/21, Mr.Harikiri
    2021/01/02,追記(Encyclopediaをアンインストールすることに決めた)

  • [WordPress] 用語の説明を吹き出しする「Glossary / Tooltip 」プラグインを導入すべきか  [2020/04/20]

    [WordPress] 用語の説明を吹き出しする「Glossary / Tooltip 」プラグインを導入すべきか [2020/04/20]

    ID7146

    はじめに

    blog記事の中で、一般的でない用語について説明した方が読者にとっていいはずです。しかし、読みづらくなるのは本末転倒。手頃なプラグインはあるでしょうか?

    WordPressの投稿にGlossaryまたはTooltipsはあった方がいい

    説明したい用語について、末尾に説明しておき、投稿内でアンカーを貼るのもいい。しかし、記事を読んでいる途中で用語の意味を知りたくてジャンプしてしまうと読書性が低下する。

    それなら、吹き出し式のGlossaryかTooltipsではどうかと考えた。吹き出しなら本文を読みながら、必要な用語の意味を確認が可能であり、今回の目的にマッチする。

    日本語環境で使えるものは?

    4つをテストしてみた。WordPress TooltipsとEncyclopediaが、日本語環境でも使えそうです。

    1. CM Tooltip Glossary : 英語と日本語が混じっている場合、その間に空白がないと英単語を抽出できない
    2. Glossary : 同上
    3. WordPress Tooltips : 英語日本語混じりでも、登録した単語を正確にTooltipしてくれる
    4. Encyclopedia : WordPress Tooltipsと同等の機能を持ってる(ドイツ製)。

    Text Hover

    ワードを登録する形式である。エディタに一括入力する(ex. WP => wordpress)

    Tooltip CK

    ワードを登録する形式ではない。

    https://wordpress.org/plugins/tooltip-ck

    CM Tooltip Glossary

    ワードを登録する形式である

    Glossary

    WordPress Tooltips

    ワードを登録する形式である

    Enclyclopedia

    ワードを登録する形式である

    2020/02/23

    結局、Encyclopedia(有料版)を導入することにした。iPhone/iPadを使っていて、Pageにジャンプせず吹き出し表示が可能だったこと、日本語/英語まじり可能なこと、などが決め手になった。

    2020/04/20

    「amp」を登録すると「Sample」が「Sample」となってしまう。この場合、設定を以下のようにすることで、完全な単語にマッチさせることで回避できる。

    Complete words ☑️

    総評

    GlossaryやTooltipsのPluginは、最も古いもので11年前のものが確認できた。3~5年のGlossary Pluginは結構ごろごろあり、忘れ去れている感じだ。

    最近でもUpdateしていてメンテナンスされているものは、5個程度である。

    それでは、なぜ、忘れ去られたものが多数あり、最近のももは少ないのか。全てのGlossary Pluginは、Getenbergエディターには対応していない。旧エディター(Classic)で編集するようになっている。

    GlossaryのWordPress上での原理を考えてみた。投稿を保存する前に、その記事からワードを拾い出し、Glossaryに登録してあれば、リンクや吹き出しコードを付加してから、保存される。

    AMP対応

    2020/04/20

    これらコードは、JavaScriptが用いられているため、ページをAMPに対応して以来、これらのプラグインが正常に動作しなくなりました。

    AMPは、基本的にJavaScriptを許さない。その代わりにAMP版のJavaScriptのサブセットが開発されており、AMPに対応するためには、そのルールに従った前処理が必要です。AMP対応、且つ,吹き出しの機能の付加は、ちょっとハードルが高そうです。現在のところAMPに対応している「吹き出し」プラグインはありません。

  • [WordPress] Post SMTP Mailer/Email Log プラグインを導入

    [WordPress] Post SMTP Mailer/Email Log プラグインを導入

    機能

    サイト外へのメールをWordPressから飛ばせなかったが、このプラグインのお陰で無事に飛ばせるようになった。

    自宅NASサーバーのメール関係に設定不良があることが、WordPressからサイト外にメールを飛ばせない原因かも知れません。

    Ultimate Memberプラグインでは、ユーザー認証のために、登録を要求してきたメールアドレスに対して、確認メールを送ります。その時にサイト外へのメールの送信が必要になります。

    編集履歴
    2019/12/14 Mr.HARIKIRI
  • [WordPress] 会員限定ページや会員のみが閲覧できるページやページ内に会員のみ閲覧できるブロックを作る – 調査編 [2019/12/08]

    [WordPress] 会員限定ページや会員のみが閲覧できるページやページ内に会員のみ閲覧できるブロックを作る – 調査編 [2019/12/08]

    はじめに

    調査を結果、Ultimate Memberプラグインをインストールしています。

    当サイトは、Ultimate Memberプラグインを試験的に導入しています。よろしければ、「いたずら」してみて下さい。使い勝手などがわかると思います。どれだけの堅牢性(ロバストネス)があるか知りたいと思っているので、ぜひどうぞ。

    よく海外からの「ヒヤカシ」があります。ユーザー登録はしていただけるのですが、その登録したe-mailに対して、自動で送られてくるリンク付きのe-mailの処理をしてくれません。そのリンクをクリックすれば、登録したe-mailは実在し且つロボットではないと、おおよそ判断できるので、登録が完了します。登録の削除もできるはずです。

    メール一覧から、ステータスが確認できます。「ヒヤカシ」の場合、「メールアドレスの確認待ち中」と表示されています。メールの確認が完了すば、「承認済み」になります。以上、これらの挙動は、Ultimate Member -> 設定 -> Emailから設定します。

    はじめに

    以下のサイトをまとめると、WordPressで会員限定ページを無料のプラグインで構築することは、必要十分のようで、有料版までは必要なさそうです。

    TCD Themeを購入することも考えたが、機能は、プラグインで達成するか、購入したテーマに組み込まれた機能で達成するかの違いであり、それぞれの開発力からすると、専門的に開発している個別プラグインから調達する方が、機能的に高いもので構築できると考えられる。

    ただ、バランス面からするとオールインワンのThemeを調達する方が良いとも言える。

    考えたあげく、出費を抑えて茨の道を行くかもしれないプラグインのインストールの方法を選択することにした。

    必要な機能(要求仕様)

    必要な機能を以下に上げてみた。こりらを全て無料のプラグインで実現できるかは分からない。

    • 会員サイトがアクセスした際の会員登録を促す
    • 会員登録の内容を不適切な登録(ユーザー名として電話番号など)はできない
    • 会員でない場合、そのアクセスしたページは一部だけを表示する閲覧制限を付けることができる
    • パスワードを忘れたユーザーに対する自動対応機能
    • メール送信機能(単純型、メルマガ型)
      • TCDテーマのプレミアムプライスでもメルマガ型はサポートしない)
    • マイページ
    • botによる不正なユーザー登録の抑制

    必要な機能が全て満たされているかは、プラグインの機能を十分に理解していないため不明だが、bot対策があるUltimate Memberには、bot対策のためのプラグインとして、Ultimate – reCAPTCHAが、2018年以降追加されたらしい。これも同時に導入するのがよい。

    WordPressプラグイン|Ultimate Memberでユーザー管理、コミュニティー投稿サイトにする方法、wano.jp – さんの記事

    WordPress(ワードプレス)で会員サイトを簡単に作成できるプラグイン10選

    WordPressで会員サイトを作るには?おすすめプラグインまとめ【2019年度最新版】

    無料で会員サイトが作れるWP-Membersの使い方を紹介

    会員サイトに必要な機能を一通り実装できるUltimate Memberについて紹介!、ページのブロック設定を参考

    「Mailchimp(メールチンプ)」の評判と実態|15個のメール配信システムを試したアイミツが徹底比較!

    WordPressで掲示板を作るならbbPress!使い方の完全マニュアル

    CTDテーマによる(2017)、WordPressで会員限定向けコンテンツが配信できる「パスワード付き保護ページ」が作れるテーマ

  • [愚者は経験から学ぶ] WordPressのあるカテゴリの表示ができないことに気づいた,その奮闘と解決 [2019/11/23]

    [愚者は経験から学ぶ] WordPressのあるカテゴリの表示ができないことに気づいた,その奮闘と解決 [2019/11/23]

    物語の流れは

    表示されなくなったカテゴリ

    状況把握と対策のステージに入る

    • カテゴリ”WordPress”の表示ができなくなっていたことに気づく
    • WordPressに原因があるのか,カテゴリがこわれたのか?
    • 今使用しているテーマTwenty seventyが原因なのか? 2カラム表示で楽しんでいたのに.
    • CTDテーマ(約1万円)に変更すれば,なおるかも.国内トップのテーマ売上らしいが.
    • いっそのこと,WordPress 5.3にアップデートしようか? 5.3より5.3.?になってからが良いと考えていたが.
    • それなら,最新のテーマTwenty Twentyに乗り換えようか?

    実行ステージに進む

    さんざんググったり考えた挙句,WordPress 5.3-jpにUpdateしてテーマTwenty Twentyを使ってみた.

    Twenty Twentyは,ググってみると1カラムモードのみのようだ。今日からは、あまり飾らず。初期設定のままでいってみよう。アクセスは少ないので世の中には迷惑をかけようが無い。飽きたら、また、ドレスアップしよう、と思っている。それにしても、スマホから見た表題がBig過ぎだなぁ。まぁ見やすいか。

    その結果

    表示テストの結果,不具合の原因は,WordPressでもテーマでもなかった.

    今日の律速は体力のようだ.今日はもう寝ることにした.夜中過ぎなので,また,今日の朝に起きてからにする.

    睡眠中でも,何かが競合しているなどあれこれ夢をみているのか,考えていてるのか,それで目が覚めた.

    最終的な解決に至る

    WordPressカテゴリのページが表示されない原因は,固定ページのパーマリンクがwordpressであったことで,カテゴリのwordpressと競合していることであった.

    Updateによる不具合

    WordPress 5.3-jpにすることで,Editor(エディター)に問題が発生した.iOSのChromeでは問題ない.Windows10のEdgeもChromeも同様に問題が発生した.TinyMCE advancedとGutenbergが競合して,TinyMCE advancedによるメニュー表示が表示されたりされなかったり,表示されてもカーソルを動かすと,そのメニューが消えたり,と症状が発生した.乗りかかった船,これまでお世話になったTinyMCE advancedとお別れして,これからは,標準エディターのGutenbergのみを使用することにした.依然としてEdgeでは不具合が残る.

    結論

    固定ページも投稿ページも,同じページであり,パーマリンクは,当然に競合可能である。それが問題を起こす。

    2019/11/22~2019/11/23、はりきり(Mr)