List category postsの公式サイト

インストールはするだけなので、特に説明しませんがしてください。

List category posts

Very customizable plugin to list posts by category (or tag, author and more) in a post, page or widget. Uses the shortco

wordpress.org

List category postsのショートコードの基本

よく利用するショートコードの基本はこちらですね。カテゴリやタグは日本語の名前でもスラッグでもOKです。

[catlist name=“カテゴリ” tags=“タグ”]

カテゴリ名をIDで指定したい場合はこうになります。

[catlist id=“カテゴリ” tags=“タグ”]

特定のカテゴリの作成者のみの記事一覧を作る場合は次のようにします。ユーザー名ではなく、ユーザー一覧のニックネームを指定します。

[catlist name=“カテゴリ”  author_posts="ニックネーム"]

ちなみに、このニックネームは置きかわるため、ソース状からは確認できないようです。

一度作ると新しい記事がどんどん追加されていくため便利です。

ショートコードの応用

少し手間がかかりますが、カテゴリとタグの両方を使うと、見やすいリストがつくれます。

リストがかぶらないように、除外タグを使うと便利な場合もあります。

たとえば、次のような場合、

• 肉カテゴリ ＋ 鶏肉タグ
• 肉カテゴリ ＋ 豚肉タグ
• 肉カテゴリ ＋ 牛肉タグ
• 肉カテゴリ + その他

その他のタグをすべての記事に割り振るより、除外した方が早いです。

[catlist name=“肉カテゴリ” exclude_tags=“鶏肉タグ, 豚肉タグ, 牛肉タグ”]

新規ウィンドウで開く

リストをクリックしたとき、新規ウィンドウの方がいいかなと思います。新しいウィンドウを開くには、link_target=”_blank”ですね。英語のフォーラムに書いてありましたよ。

[catlist name=“カテゴリ” tags=“タグ” link_target="_blank"]

並び順

現在、デフォルトの並び方は、日付かID順っぽいですね。orderbyを使ってタイトル順(名前順)に並べ替えます。

[catlist name=“カテゴリ” tags=“タグ” link_target="_blank" orderby="title"]

List category postsの設定は忘れずに

List category postsの設定も忘れずにしたいものです。
Number of posts に　” -1 ” を入力します。
こちらの設定に-1と入力しておかないと、たしか10件までしか表示されないはずです。

無制限に表示しても、個別に制御できるところがよくできているところです。
記事数を制限したいときは次のようにします。

[catlist name=“カテゴリ” tags=“タグ” link_target="_blank" orderby="title" numberposts="15"]

List category postsのバグ!?

List category postsはカテゴリ名が長すぎるとうまく動作しないようです。注意したいですね。

個人的に使うのはこのぐらいですが、サムネイルなど他にも使えそうな便利なショートコードがたくさんありましたよ。このプラグインは、サイトマップや目次を作成するときに重宝します。わりとカスタマイズ柔軟性があって好きです。

• アイキャッチ画像で不要な画像サイズを生成してしまった場合
• WordPressのテーマやプラグインが勝手に不要な画像を生成してしまった場合

未使用な画像を削除するのに、DNUI Delete not used imageが便利です。画像サイズごとに削除できますので。

DNUI

Search image from the database and delete all unused images making space in your server and clean up the database from a

wordpress.org

WordPressでメディアライブラリから削除するプラグイン DNUI Delete not used imageの使い方

使い方は簡単で、

1. SCAN DATABASEのタブをクリックする
2. nameの左にあるチェックボックスをクリックすると、一括選択できる
3. delete all selectのボタンを押す

というシンプルなものですが、これだと未使用の画像を全部削除してしまいます。

削除したいものだけ削除するには、あらかじめオプションの設定をして選択するものを限定します。生成している画像の種類ごとに除外できるため。

その手順は、

1. OPTIONのタブをクリック
2. Ignore sizes その名のとおり無視するサイズを選びます。こちらがテーマやプラグイン、あるいはご自分で設定したthe_post_thumbnailの画像サイズに紐付いているようです。
3. そうすると、nameの左にあるチェックボックスをクリックしたさい、選択対象が変わります。

これで画像削除ができます。

メディアライブラリに登録するプラグイン

ちなみに、メディアライブラリに登録するプラグインはこちらを利用しています。FTPでアップロードした画像フォルダごとに管理できるのが気にいっています。

【乗り換え】Flash Uploader → Media from FTP → Bulk Media Register《Wordpressのプラグインの使い方》

FTPからアップロードした画像をメディアライブラリに登録するにあたり、結構昔にFlash Uploaderを使っていました。そのあと、Media from FTP → Bulk Media Registerと乗り換えています。任意のフォルダ

ebookbrain.net

16user

WordPressでメディアライブラリの画像を生成しないようにする

不要な画像を生成しないように、あらかじめWordpressの設定を行うことも可能です。これはご存知の方が多いでしょうので、おまけ程度ですが…。

設定 > メディア

の値をすべて0にしておくと、不要なアイキャッチなどの画像を生成しません。

cocoonの場合

サイト立ち上げ時のおすすめ設定です。Cocconの方で基本的に使う画像は生成してくるようなので0にしておきます。

• サムネイルのサイズ:0
• 中サイズ:0
• 大サイズ:0

Cocoonは次の画像が生成されるようです。設定は正方形にしています。

• thumb120
• thumb150
• thumb160
• thumb320

Cocoonが生成した画像は基本的に必要なもののはずなので削除しないようにしています。

これをどうするのか若干悩みました。

• medium_large(xxx-768×568.png)

medium_large_size_wは必要!?

うーん(´・ω・｀)

どのブログでも次のアドレスにアクセスし、０にしましょうと案内されているんだけど、

https://ドメイン名/wp-admin/options.php

なぜいらないのか明確に説明しているブログが皆無に等しい…。

そもそもこれってWordPressの開発者が必要だからバージョン4.4で追加されたわけでしょう。しかも隠しメニューの方にいれているから一般人にはいじってほしくないだろうと推測できる。

察するに幅768pxのレスポンシブデザインでの表示を想定しているよね。スマートフォンやタブレットなどの中間サイズのデバイスに適した画像であり、高速化するために用意した画像って気がするんだよね。

海外のサイト見るとそう書いているもんな。

These files are used in various places for various functions, to improve mobile responsiveness

https://behind-the-scenes.net/default-wordpress-image-sizes/

実際に使われているのか検証するのは少々面倒そうなので、とりあえず、消さずにそのままにしておきます。WordPressで容量が足りないとかないんで。わが道いく(´・ω・｀)

ただ、cocoonではGithubのリポジトリから検索してもひっかからないので、cocoonからは呼ばれていないようです。

参考になれば幸いです。

Googleアドセンスがタブから戻ると表示される

タブを切り替えて、戻ってきたら自サイトにアドセンスの全面広告が表示されるようになりました(2024年2月)(´・ω・｀)

最近サイトを開いて、別タブに行って帰ってきたときにGoogleの全画面広告が表示されててうぜえ、入れてるChrome Extensionがマルウェア化したのかと思って検証してたんだけど、どうやらGoogle AdSense自体がそういう仕様になったらしい？
Google Evilすぎるだろ。

— じーちゃん (@_ji_chan) December 16, 2023

Google AdSense の全画面広告って仕様変わった？

前はどこかリンクをクリックしないと表示されなかったと思うけど、時限式になってる？それとも、別タブで開くのもトリガーになった？

なんか変なアンカーもつくし。

詐欺サイトみたいで、気持ち悪りぃんだけど。やめてくれないかなw

— た〇〇 (@x795271_t2rcg) November 9, 2023

個人的にそのような自動広告など設定していません。勝手にされました。

昔はアドセンスは1ページ3つまでという健全なルールがありましたが、どんどん崩壊していますね…。広告がたくさんの無料ブログみたいなサイトが多くなり、閲覧しにくいです(´・ω・｀)。

米国株投資家なので、付け加えるとGoogleは最近決算がコケており、なりふり構わずみたいな傾向になっていますかね。

ただ、品質低下を自ら率先しているような気がして最近のGoogleはよくないですね。Googleさんクオリティ管理ですよ！

(追記)自動広告が勝手にされていたためオフにしました…。許可なくやるというのはなりふりかまわずという感じですね。特に内部リンクや外部リンクを踏んだとき、表示される広告がうざいですね…。。昔のGoogleに戻って(´・ω・｀)

GoogleアドセンスのTips

Google アドセンスのポリシー違反が勝手に解除！

見に行ったら消えていました。謎です。

身に覚えのないアドセンスのポリシー違反。放置しといたら1週間くらいで消えた。軽微なのは安心して放っといて良さそうだ。

— SiRO@個人開発 (@codemesi) August 7, 2021

そういう人はいるみたいですね。それなら吟味してから通知してくれればいいのですけど…。

とはいえ、通知がきたらすぐに見に行った方がいいですね。昔は24時間以内になおさないとみたいな感じでしたから…。

Google アドセンスのポリシー違反が分からない！

肌色が多い画像はダメだとか、この単語はダメだとかいろいろとあるみたいですが、

どうしてもわからない場合、何もせず審査にだしたことがあります。警告は消えました。

(旧記事)moreタグの置換やQuick Adsenseを使わず、記事途中にアドセンスなどを表示する方法

moreタグやプラグインを使わず記事途中にアドセンスを挿入する方法に関する覚書です。

現在はこちらの方法の方がいいですね、

【Cocoon/Swell】H2見出し上にGoogleアドセンス(広告ウィジェット)【目次上は危険!?】

WordPressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外したりカテゴリやモバイルとの切り分けなど個人的に活用しているtips

ebookbrain.net

moreタグにアドセンスを挟む方法は使えない。

moreタグはいちいち挟むのが面倒なので、使っていませんでした…。
字数できるようにしていたため、アドセンスを入れるとおかしなことになります。
だからといって、すべてのページにmoreタグを挟むなんて面倒なことは、やっていられません。

Quick Adsenseもつかいずらい

Quick Adsenseの使い方は簡単ですが、Pタグしかできません。Hタグの下にだしたいです。
表示されない等の不具合もあるようです。

追記：最近更新もされていません。。

ただ、Quick Adsenseはコード作成のヒントにはなりました。

コードで実装

出来上がったコードはこちらです。functions.phpに挟みます。

/**
 * wordpressの記事中にウィジェットを追加
**/
add_filter( 'the_content', 'my_content_filter' );

function my_content_filter( $return_value ) {

	$num_p = 3; //段落数
	$result = '';
	$return_value = explode( '</p>', $return_value );

	foreach( $return_value as $key => $val ) {

		if( $key + 1 == $num_p  && !empty( $val ) ) {
			$result .= $val.'</p><!--ReplaceLabel-->';//コードを追加
		}else{
			$result .= $val.'</p>';
		}
	}

	// 設定したコードを検索して置換を実行する
	// preg_replace_callbackの引数：検索、置換後、置換前、置換する回数、置換した回数
	$result = preg_replace_callback( '|<!--ReplaceLabel-->|', 'get_the_widget_in_post', $result, 1, $count ); 
	if ( $count == 1 ) {

		return $result;
	}

	return $return_value;
}



function get_the_widget_in_post( $matches ) {

	ob_start();

	if( in_category('カテゴリ指定')) { //表示したいカテゴリを指定する
		dynamic_sidebar(post_top); //idを指定
	}
	$out = ob_get_clean();

	return $out;
}

最終的に参考にさせてもらったサイトはWPのフォーラムです。大変、勉強させてもらいました。

フォーラム » 記事中の任意の場所に、ウィジェットを追加をしたい — WordPress

最初はプラグインでやろうと思ったのですが、すでに関連記事のプラグインを導入しており、同じようなプラグインを２つ利用すると、衝突するかもしれません。実際、少しだけテストしたところ、おかしな挙動になったプラグインもありました。

WordPressでおすすめ記事を手動で表示する方法

サイドバーに画像つき手動リンクを設定する1番簡単な方法

基本はやっぱこの方法ですよね。詳しくはこちらのサイドバーカスタマイズの記事に書いてあります。

This Page Does Not Exist

Oops, looks like the page is lost.

it-hand.com

カスタムフィールドで関連記事を表示する

そこで、今回はカスタムフィールドを使って実装することにしました。

post.phpの表示したい箇所に、次のコードを書きます。
やりたいのは表示したい記事だけに表示することです。

<!--カスタムフィールドによる関連記事エリア-->
<?php if(post_custom('manual_link')): ?>
<div style="margin-top:30px">
<?php echo post_custom('manual_link'); ?>
</div>
<?php endif; ?>
<!--カスタムフィールドによる関連記事エリア-->

次に投稿記事に移動します。カスタムフィールドは表示されていないことがあるため、画面上の隠れているメニューから表示のチェックボックスを入れましょう。そして、カスタムフォールドの「名前」に

manual_link

を入力してプログラムの関連付けをします。

次に、値の欄に、手動で表示したい関連記事の中身のコードを書けばいいだけです。

<p>●　この記事を読んだ人におすすめの記事です!!<br />
<a href="https://ebookbrain.net/" target="_blank"></a>
</p>

タグはお好みでどうぞ。これで離脱率はさがるのでしょうか。なんとなく効果はある気がします。

後日談。。
ただ、この方法だと投稿の編集に直接いれても手間が変わらないんじゃないか、と思い始めて、3日ほどで導入をやめました^^;カスタムフィールドにしてしまうと、Search Regexなどの検索にもかからなくなるなどの理由もあります。

手動で関連記事を表示できる5つのプラグイン

ついでに、手動設定できるプラグインも紹介しておきます。

●　WordPress Related Posts
WordPress › WordPress Related Posts « WordPress Plugins

こちらが１番有名のようです。

●　Manual Related Posts
WordPress › Manual Related Posts « WordPress Plugins

使い勝手はよさそうです。ただ、こちらは文字が切れてしまう症状がありました。
しかも、手動の関連記事だけではなく、人気記事のプラグインとYARPPの文字も切れるようになります。回避策があるのかもしれませんが、その前にカスタムフィールドを導入することに決めたため、調べていません。

●　Related Posts for WordPress
WordPress › Related Posts for WordPress « WordPress Plugins

評判はよさそうですが、2年以上更新がないようです。

他にもこんなプラグインがあります。

●Custom Post Types Relationships
WordPress › Custom Post Types Relationships (CPTR) « WordPress Plugins

●Posts 2 Posts
WordPress › Posts 2 Posts « WordPress Plugins

わりとたくさんありますね。使い方はぐぐればでてくるでしょう。個人的にはプラスアルファ手動で関連記事を表示したかったため、プラグインの導入は見送りました。ただ、プラグインを導入をしたい人の参考になれば幸いです。

WordPress公式が用意しているプラグインを使う

実は、もうひとつ手動でマニュアルリンクを設置するプラグインがあります。裏技というか発想力でしょうか^^

そうです。Wordpress自身が用意しているLink Managerというプラグインを使います。外部リンクではなく内部リンクとして使えばいいだけですからね。

サイドバーにウィジェットとして配置するだけです。画像も利用できます。人気記事を設置していれば、その画像urlを設定してあげればいいだけです。

ただimgタグのところにclassがなぜか設定されていないため、文字の位置等をカスタマイズするにあたりちょっと困るかもしれません。

WordPress Popular Postsを利用してマニュアルリンクを作成する

作り方はこうです。

１、特集のカテゴリをつくる。そのカテゴリに表示したい記事の数分だけ割り当てる。複数カテゴリにするか、カテゴリを移動するかはどちらでもありですね。パーマネントリンクは%post_id%にしている人は、基本的に影響はありません。

２、Wordpress Popular Postsでそのカテゴリを表示する。5つ選んで5つ表示すれば必ずサイドバーに表示されるため、手動リンクになります。

これだけです。^^

ソースはこうです。

<?php if(in_category(array( '4', '12' ) )): ?>
	<h4>俺が選んだおすすめ記事</h4>
	<hr>
	<?php if (function_exists('wpp_get_mostpopular')) {
	$args = '
	limit=5&
	range=all&
	order_by=views&
	thumbnail_width=120&
	thumbnail_height=120&
	cat="12"&
	wpp_start=""&
	wpp_end=""&
	post_start="<ul class="wpp-list">"&
	post_end="</ul>"&
	stats_comments=0&
	stats_views=0';
	wpp_get_mostpopular($args);
	} ?>
<?php endif; ?>

詳しくは次の記事も参考にしてください。リンク先の記事と違うポイントは、カテゴリIDを直接しています。cat=”12″のところです。あと、特定のカテゴリだけに特集記事を表示したい場合、in_categoryで制御します。全ての記事にだしたい場合は、分岐する必要はありません。

カテゴリ別の人気記事を簡単に表示する方法(プラグインWordPress Popular Posts版)

そのため、jqueryのsliderなどが有名で個人的にも利用していましたが、 もっとお手軽にプラグインで実装できないのかを調べたところ意外といろいろな方法がありましたのでまとめておきます。 全部実際に軽く使ってみましたよ。

(追記)その後、メニュー系のプラグインはサブスクのサービスが多くなりましたね。メニュー系のプラグインだけにサブスクは少しきついですね。でも、買い切りの有料テーマ、Swellで簡単にできました。

WordPressでスマホの固定メニューを作れるWordPressのテーマ!

SWELL

UIもそれなりによく、ブロックエディターにこだわりをもたれて開発されているようです。Swellを買って使っています。

• 固定メニューも対応しています。
• ボックスナビとあわせて使うとアイコンつきボックスをスマホの中にいれられます。
• CSSだけで結構カスタマイズもできました。

SWELL

• シンプルなデザインですが、使いやすいものなので、ある程度デザインがすぐに整います。
• 人気記事などは正方形のデザインも可能です。
• 利用者が多くて情報が豊富です。
• 複数サイト使えて買い切りです。

次のような高い機能性をもっています。

• 高速化の機能がついています。
• 波の映像が印象的ですが、トップページは動画をいれこんだり、画像のスライダーをつけたりも簡単にできます。
• PC・スマホともに固定バーにできます。

SWELL

WordPressのテーマの比較はこちらです。

【比較】SWELL/stork19/JIN:R/sango【テーマの違い、どっち!】 | ithands

WordpressのテーマはSwell、ストーク、JIN:R、sango、Cocoonなどいろいろとありますが、Twitterの感想と自分の利用経験についてまとめていきます。 【比較】SWELL/stork19/JIN:R/sango/Co

www.ithands.dev

スマホメニューの固定サンプルはこちらのサイトです。

This Page Does Not Exist

Oops, looks like the page is lost.

it-hand.com

WordPressでスマホのヘッダーメニューを固定するプラグインまとめ

WordPress Responsive Menu Pluginの特徴と使い方

Responsive Menu — WordPress Plugins

残念ながら有料版は買い切りからサブスクに移行したようです。

インストール数は1番のようです。

デメリットはメニュー内にソーシャルアイコンがありません。
検索ボックスがトップメニューおけないようです。メニュー内の1番上と1番下におけます。

使い方はプラグインをオンしてブラウザで幅を狭くすればメニューアイコンが表示されます。アイコンが表示されない場合は、おそらくテーマが干渉しているはず。実際うまく表示されないテーマがありました。 別テーマや別ドメインで試すとよいかもしれません。

他は以下のようになります。

• Look & Feel > Fixed Positioningでまずメニューを固定にします。
• テキストの入力欄があり、アイコンとテキストをあわせて表示できます。
• Click Button Title Positionで上下左右どこにでもテキストを配置できるなど細かい設定に配慮があります。
• Look & Feel > Slide Sideでメニューがでる位置を決められます。
• Advanced Setting > Auto Expand Sub-Menusでサブメニューを開いたままにできます。
• 他、細かい設定が山ほどあります。
• Header Bar & Themes [PRO] にロゴを設定する項目がありますが、プロ版でないと利用できません。
• プロ版にしないと利用できない項目もかなりありますね。
• 料金はWP Responsive Menuとほぼ同じです。こちらはシングルサイトのライセンスがお気軽に試せます。

WP Mobile Menu – The Mobile-Friendly Responsive Menu

ダウンロード数は多いようですが、プレミアム機能はサブスクのようです。

プレミアムの内容を確認しましたが、プレミアムにしないときついな感じました。

WP Mobile Menu – The Mobile-Friendly Responsive Menu

Need some help with the mobile website experience? Need an Mobile Menu plugin that keep your mobile visitors engaged?

ja.wordpress.org

myStickymenu

評価は高いようですが、プレミアム機能はサブスクのようです。

My Sticky Bar – Floating Notification Bar & Sticky Header (formerly myStickymenu)

Create a welcome notification bar for your website. Also, My Sticky Bar plugin can make your menu or header sticky to th

ja.wordpress.org

結局、SWELLをカスタマイズすることにしました。

SWELL

サンプルはこちらです。

This Page Does Not Exist

Oops, looks like the page is lost.

it-hand.com

SlickNav Mobile Menuの特徴と使い方

SlickNav Mobile Menu — WordPress Plugins
スマホで表示しても固定されたままです。たまにPCでスマホサイズにして見ると固定されているけど、実際、スマホで動作確認をすると固定されないプラグインがあるので、要注意です。

特徴は次のとおりです。

• メニューは上部から開きます。
• メニューを開いたとき、サブメニューを閉じておくか、開いておくか選べます。
• メニューのボタンは左右どちらにもおけます。
• 色変更

使い方はslickNav mobile menu nameにスマホで表示したいメニューのidを入れます。 ソースを見ると、ナビのulのところにidが書いてありますから、そのidを入れればoKのようです。あとはインストールしてみれば、すぐわかるでしょう。

デメリットは検索ボックスがメニューの中にはおけるのですが、上部のヘッダーメニューの上にはおけません。そのため個人的にはスルーしました。細かいことですが、メニューを開いたとき、背景が固定されません。

無料なのでいまいちでコードを書き足すといいかもしれません。

Subversion Repositoryが公開されているようです(意味がわからん人はスルーしてください。)

WP Responsive Menuの特徴と使い方

WP Responsive Menu – Mobile Menu Plugin For WordPress – MagniGenie
WP Responsive Menu — WordPress Plugins

(追記)2回ほど有料版を購入しました。ものはよく買い切りですが、ネックなのがライセンスが1年です。1年後に管理画面に入ると、ダウンロードできなくなっていました…。

結局、SWELLをカスタマイズすることにしました。

SWELL

サンプルはこちらです。

This Page Does Not Exist

Oops, looks like the page is lost.

it-hand.com

無料版はなんか物足りなかったのですが、WP Responsive Menu proの有料版はいいですね。 プロ版の使い方の動画があります。

無料版と有料版は完全に別れています。購入ののち、ダウンロードする形式です。

細かい点は動画を見てもらった方がいいですが、プラグインを有効化したのちセーブすれば固定メニューが表示されます。あとは設定メニューをみて設定すればOKです。

無料版はかなりの機能が削られていて、メニューや項目自体がないです。 グレーになっておらず、丸々削られているので、ちょっと差がわかりにくいですけどね。 上記の動画と見比べて確認しましたね。。

まとめると次のような感じです。

• スマホでも固定されたままです。
• 検索ボックスの位置はメニューの上、メニューないの上と下など選べます。
• 階層化されたサブメニューが開いた状態と閉じた状態を選べます。
• 色の変更も可能です。
• メニュー内にソーシャルアイコンがおけます。
• 関係者じゃないですけど、お値段も別に高くないのでいいかもと。というか結局、このpro版が1番気に入って買いました。
• (追記です。昔はサイト制限がなく15ドルですごくお買い得だったのですけど値上げしてしまったようです。。まあ、昔は安すぎた気もしますし、あとはご判断くださいませ。。)

使い方でちょっとわかりくいところだけ書いておきます。

Search icon colorはメニューのアイコンではなく、検索ボックスのアイコンのカラーです。

メニューアイコンも個別に指定することになっているため、テキストカラーを変更した際に一緒に色が変わらなくても焦らないようにしましょう。メニューにある検索アイコンはテキストカラーと一緒です、

Menu borders(bottom) colorはEnable borders for menu itemsがNOになっている場合、表示されない線になります。
Menu borders(top & left) colorでメニュー内の輪郭線の色を変更します。

少し名前を付け方がよくないかもしれません。。あとは見ればすぐわかるのではないですかね。

ちなみにロゴをセンタリングしたいときはこうです(追記：センタリングの機能が追加されました)。

/* 固定メニューのプラグイン */
#wprmenu_bar{
	text-align: center !important;
}

アイコンの隣にメニューのテキストをだすと、それまでセンタリングされてしまいます。その場合はもっと複雑なコードを書く必要があります。

動画を見ているとき、この人はどこの人となのだろうと思ったのですけど、インド人みたいですね。ちょっとカスタマイズする際に根深い問題があり、Skypeでサポートしてもらったことがあります。

あと、細かいことですが、メニューが開くとき上にのっかるのではなく、スライドしてずれます。個人的にこのあたりの仕様は気になっていたため、嬉しいですね。

スライドしてずれるのではなく、上にのるメニューはアドセンスなんかに重なるのですよね。アドセンスは上にのっけるのはダメとかいっていますよね。プラグインを選ぶときはこのあたりまで配慮したいですよね。

WordPressのテーマ自体がこうしたメニューを実装しているものもありますが、 プラグインの方がテーマを選ばず、自由に使えるため便利なのですよね。

WordPressでスマホのメニューバー表示を削除する

固定メニューを追加することにより、もともとあったスマホのメニューが邪魔になることが多々あります。その場合、メニューを削除する必要があり、下記のようなコードになります。

@media only screen and (max-width: 1024px) {
	#main-header {
		display: none;
	}
}

#main-headerの部分はテーマにより違うため、コードをみる必要がありますが、わりと簡単に見つかると思いますね。max-widthもテーマのcssを見るといくつで切り替えればいいのがすぐわかります。

Googleアナリティクス(ga4)の使い方!WordPress,Boothなどショッピング

google analyticsのアカウントとプロパティの違い

google analyticsにサイトを追加するとき、アカウントとプロパティをどうするか考える必要があります。プロパティを追加する方法しか知らない人もいるかもしれませんが、アカウントという上位階層があります。

アカウント
-プロパティ(サイトa)
-プロパティ(サイトb)
-プロパティ(サイトc)
アカウント
-プロパティ(サイトd)
-プロパティ(サイトe)

プロパティに作る場合、IDが連番になります。アカウントに作る場合、別のIDになります。同じようなサイトは同アカウントでプロパティを追加してもいいかもしれませんし、まったく違うサイトはアカウントを分けてもいいかもしれません。わかりやすさによるところが大きいかもしれません。

個人的にWordPressとBoothはアカウントをわけています。

Googleのアカウントはひとつで大丈夫です。

google analyticsのサイト追加「新しいアカウントを作成」と「新しいプロパティを作成」

上記の構成を考慮の上、「新しいアカウントを作成」と「新しいプロパティを作成」のどちらで作成するかを決めて作成します。

画面左下の管理 > アカウント > 新しいアカウントを作成
画面左下の管理 > アカウント > 新しいプロパティを作成

*画面右上の人のアイコンにある、アカウントの追加はGoogleアカウント管理なので、違います。
*アカウント名はアカウントの設定で名前を変更することができます。

新しいアカウントを作成の項目いつもはとくに迷う部分がないため、割愛。トラッキングコードを取得します。データ共有設定はチェックをいれたままにしています。

Google Analyticsの使い方(アカウント作成)

Google Analyticsのアカウント作成時に聞かれることです。

1. Google のプロダクトとサービス: Googleがアナリティクスデータを他のGoogleサービスの改善に用いることを許可します。デフォルトはチェックが外れています。
2. モデリングのためのデータ提供とビジネス分析情報: あなたのデータが集計され、予測やモデリング、ベンチマーク等に用いられます。商用データを厳重に保護したい場合は外すべきかもしれません。
3. テクニカル サポート: 問題が発生したときにGoogleのテクニカルサポートがアカウントにアクセスできるようになります。
4. アカウント スペシャリスト: Googleのセールススペシャリストがアカウントにアクセスでき、設定や分析の改善提案を行います。セールス担当はないのではと外しました。

後から設定は変えられるようです。とりあえず、テクニカルサポートだけチェックしました。

もうひとつ、「ビジネス目標を選択する」という項目がありました。

1. 見込み顧客の発掘: 新しい顧客層を探すことに焦点を当てたい場合はこのオプションを選びます。例えば、どのようなキーワードで流入しているのか、どのようなコンテンツが注目されているのかを理解するために役立ちます。
2. オンライン販売の促進: 売上を重視する場合は、このオプションが最も直接的です。購入までのユーザーの行動をトラッキングし、どうすればコンバージョン（購入）率を上げられるかを理解するために有用です。
3. ブランド認知度の向上: 長期的なブランド価値を高めることが目的であればこのオプションを選びます。これにより、例えばソーシャルメディアからの流入や特定の記事・コンテンツの影響力などを測定できます。
4. ユーザー行動の調査: ユーザーがサイト内でどのような行動を取っているかを詳細に調査します。どのページがよく見られているか、ユーザーがサイトでどれくらいの時間を過ごしているかなど、ユーザーエクスペリエンスの改善に直結します。
5. ベースライン レポートの取得: これは基本的なデータのみを収集するオプションです。他のオプションと併用はできません。

ベースラインをチェックすると他が全部外れます。ショップ販売だったため、他の4つをチェックを入れました。

拡張計測機能はそのままの設定にしました。

無事G-はじまるIDを入手できました。

アドセンスの自動広告の設定(オンオフ)

アドセンスの自動広告は次の手順でいけます。

広告 > サマリー > [サイトごと]のタブ > 鉛筆の編集アイコン > 自動広告ON > サイトに適用 > [今すぐ適用]を選び保存

OFFはONのところをオフにすればいけます。自動広告はすぐには表示されないです。

Googleが自動広告が勝手に作成!メールに届く(追記)

メールが届きました。

このたび、お客様のアカウントが最適化されました

自動最適化が適用されています

Googleさんからのメール

Googleさんが勝手に自動広告を作成しはじめたようです。

最適化 > テスト

という項目がGoogleによって追加されていました。

オリジナルとパターンという項目があり、パターンが自動化の原因ですね。オリジナルに切り替えました。

もしくは次のとおりですね。

テスト > 自動最適化をオン > 自動最適化をオフ > 設定を保存

大事なのはマネーに囚われてはいけないということです。

2023年5月ごろにそういうツイートがではじめました。うちもやられました。

またもやアドセンスが勝手に自動広告をテストしていたので、速攻でオフにしました。Evil以外のなにものでもないでしょ

— こまめブログ (@littlebeansinfo) May 6, 2023

エビルとは思っていませんけど、同じくオフにしました。

デメリットが多いアドセンスの自動広告よりCocoonの半手動広告の方が効果的!?

• Google的には最適なのかもしれませんが、他との広告との兼ね合いまで考えて配置してくれません。ブロガーは他の広告の方が収益性が高いことがほとんどで、残念ながら最適化ではないのです。。
• Googleの自動広告が表示されているサイトは1ユーザーとして見にくいです。UI・UXが許容できないレベル!ユーザーの快適さを損なっている。

裏ジョブである米国株投資家的にみると決算が微妙で焦っているのかもしれませんが、デザインやプログラミングなどの開発者視点でみると、最近のGoogleさんはどうしてしまったのでしょうか。。という感じです(´・ω・｀)

投資家向けの記事も執筆していてNISAの口座開設がおすすめです。

評判！sbi証券の資料請求の申し込みや手続きの流れ【イデコ豆知識】

↑SBI証券でイデコに契約しましたので、その体験談をシェアしていきます(国内株式、海外株式、NISA、SBI銀行も使っているSBIどっぷりのユーザーです)。覚書もかねて豆知識を含め網羅的にイデコについてまとめました。sbi証券の資料請求の申

ebookbrain.net

自動広告をやめた理由

自動広告はテストしたところかなりうざいです。画面が切り替わるときに表示される広告はストレスしかありません。記事下に常につくのも邪魔です。他にもいろいろありますが、このぐらいにしておきます。特定のurlのみ広告を外すことはできますが、かなり面倒でしょう。

カスタマイズである程度改善できるようですが、そもそもデフォルトがうざいのはUIとして考えものです。個人的にデザインやプログラミングはやるため考えてしまいます。。ユーザーファーストのGoogleさんはどうしてしまったのでしょうか。😅

(フォローしておくとアドセンスの管理画面はそこそこ使いやすいと思います。)

cocoonのマニュアル設定の方が優秀な気がして自動広告はやめました。cocconの設定を使っています。こちらも広告1つ貼り付けるだけで自在です。うざくならないぐらいに調整するのも楽です。記事内広告としてもよくできている気がします。

収益効果の問題ではなくそれ以前のユーザービリティの問題です。

詳しくはこちらの記事のCocoonの項目をみてください。

【Cocoon/Swell】H2見出し上にGoogleアドセンス(広告ウィジェット)【目次上は危険!?】

WordPressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外したりカテゴリやモバイルとの切り分けなど個人的に活用しているtips

ebookbrain.net

アドセンスの記事内広告の効果

余談になりますが、新しくGoogle Adsenseには「記事内広告」ができたようですが、効果はいまいちのようでまだ導入を見送っています。記事内広告よりcocconの方が楽な気がします。

(旧記事)ラージスカイスクレイパー(サイドバー配置)の効果は検証する必要さえなし?

Googleアドセンスのラージスカイスクレイパー(Large Skyscraper 300×600)は効果あると言われるけど、スマホで使うと全面隠してしまって規約違反な気がしますよね。では、どうすればいいのでしょうか?

まず前提が変わりました。今までアドセンスは3つまでだったため、記事上、記事中、記事下などの記事内で3つで十分でした。

しかし、3つの上限が撤廃されたようです(「アドセンス ４つ」などでぐぐるとでてきます)。そのため追加でどこかアドセンスを配置できないのかを考えると、PCはサイドバーにラージスカイスクレイパーを配置することを思いつく人も多いのではないでしょうか。

10年とはいいませんが、かなり昔の話になりますが、アドセンスのサイドバーの効果はいまいちでした。そして、スマホからの閲覧者が時代の流れと伴い増えて記事内に3つしかありえない気がしていました。

ただし、検証した時期は昔の話のためラージスカイスクレイパーはまだありませんでした。レクタングルや他の縦長で検証しました。

最近、サイドバー右上にラージスカイスクレイパーを貼ってある力があるブロガーさんが増えてきました。たとえばh2のタイトル上にアドセンスを貼る際にコードでお世話になった寝ログさんも貼ってあります。

【Cocoon/Swell】H2見出し上にGoogleアドセンス(広告ウィジェット)【目次上は危険!?】

WordPressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外したりカテゴリやモバイルとの切り分けなど個人的に活用しているtips

ebookbrain.net

そして、そのサイズのバナーを広告主が用意していなくてもレクタングルのサイズのバナーが2つ縦に並ぶような仕組みも用意されました。昔、検証したときはそのようなことはできませんでした。Googleの担当におすすめされたという記事も見かけ状況が変わってきています。だから導入を検討したのです。

そしてラージスカイスクレイパーが他と比較して効果が高いのかなどは検証するまでもなく4つ貼れるとなると貼った方が必ずプラスになります。あとは気分の問題なので好きにしたらいい気がします。

ラージスカイスクレイパーのスマホやモバイルは規約違反？

問題なのはラージスカイスクレイパーをスマホやモバイルで貼ることが規約違反のようです。

ラージスカイスクレイパーは300×600で非常に大きいため、スマホでは広告で隠れてしまうからです。Googleのフォーラムをみると、日本語でも英語でもそのような回答をいくつか見かりました。

ラージスカイスクレイパーは使ってはダメ?スマホの変更や削除もいらない?

上記の理由により、ラージスカイスクレイパーはスマートフォンで使ってはいけません。

ここですぐに思いつくのがラージスカイスクレイパーはスマホだけ非表示にしたり、is_mobile()で切り分けて違うアドセンスのサイズを表示したりする方法です。実際にそのような対応を取っているサイトも少なくありません。しかし、それもいりません。

実はレスポンシブ広告ユニットで対応できます。だから、厳密にいうとラージスカイスクレイパーは使ってはダメでレスポンシブ広告ユニットでラージスカイスクレイパーのサイズを表示すればいい。そうするとスマホは勝手にサイズが小さくなります。

はじめ記事内のレクタングル大とレクタングル中の切り替えのようなstyleのカスタマイズがいるかもと思いましたが、Googleさんがサイドバーはラージスカイスクレイパーのサイズが効果が高いと認識しているではないかと思って、試しにカスタマイズせずに貼ったら、そのサイズになりました。スマホでは半分のサイズになっています。

結論としては単純にサイドバーのウィジエットにレスポンシブ広告ユニットをおけばいいだけ。(ただし、サイドバーが狭いテーマなどを利用していると、事情は変わってくるかもしれません。このサイトはそうなだけです。テンプレートは現在、寝ログさんのsimplicityを使っています。)

はじめてレスポンシブ広告ユニットはカスタマイズなしで利用することができました^^

このサイトのアドセンスはすべてレスポンシブ広告ユニットになりましたね。

ご参考になりましたら幸いです。

他にも似たようなプラグインとして次のようなものがあります。

Wordpressのアイキャッチをデフォルト指定/カテゴリ別するプラグインとfunctions.php

Wordpressのアイキャッチをデフォルト指定/カテゴリ別するプラグイン覚書です。Wordpressのアイキャッチをデフォルト指定/カテゴリ別するプラグイン【乗り換えの歴史】Default Thumbnail Plusはアイキャッチが自動

ebookbrain.net

1user

【WordPress】Quick Featured Imagesの使い方【plugin】

Quick Featured Imagesはデフォルト画像と一括編集はどちらを使えばいいの?

Quick Featured Imagesというプラグインを見つけました。カテゴリごとに設定できますね。このプラグインならfunctions.phpの対応もいらなさそうです。

Quick Featured Images

The time-saving solution for managing tons of featured images within minutes: Set, replace and delete in bulk and set de

ja.wordpress.org

少しごちゃごちゃしたプラグインのため迷うかもしれませんが(機能が豊富とも言い換えられるかもですが)。慣れれば簡単です。

「デフォルト画像」と「一括編集」はどちらを使えばいいのかですけど、まだ何も画像が設定されていないのならデフォルト画像でよさそうです。何か画像が設定されている場合、「一括編集」の方がよさそうです。「デフォルト画像」だと何か画像が設定されている場合、うまく書き換わららず2回目からエラーが発生したことがありました。どちらかといえば一括編集を使うことが多そうです。

プラグインはインストールすると日本語化されるような情報もありましたけど、なんか一部以外は日本語化されなかったので、英語のまま使っています。

一括編集で、Quick Featured Imagesのカテゴリのアイキャッチを変える

アイキャッチ画像 > 一括編集

一部個別指定してあるけど、大部分はアイキャッチ画像が指定されていないとします。その場合、個別指定したアイキャッチは上書きせず、他の記事にアイキャッチ画像を指定できればよさそうです。

• Set the selected image as new featured image　←これだけチェックします。
• Replace featured images by the selected image
• Remove the selected image as featured image

Choose Imageで指定したい画像を選択しておきます。

次のチェックはランダムに指定するわけではないので使いません。

• Set multiple images randomly as featured images

次の設定は削除指定のようです。上書きしたくないためチェックをいれません。

•  Remove any image as featured image
•  Remove all featured images without existing image files

[次]へをおします。

2番目をチェックするとすでに指定されているアイキャッチの上書きを回避してくれるようです。どちらもチェックしなくても上書きはされませんが、上書きはされないエラーがでます。チェックを入れた場合は、最初から上書き対象にならず表示すらされません。エラーがでません。

• Overwrite featured images: Overwrite existing featured images with new ones
• Consider only posts without any featured image: Posts with featured images will be ignored, even if the Overwrite option is checked

1カテゴリごとに画像を割り当てる場合、フィルターはカテゴリにします。

• Post Type Filter: Search by post type. By default all posts and pages will be affected.
• Category Filter: Search posts by category　←ここをチェックします。
• Tag Filter: Search posts by tag

カテゴリ指定できるので、カテゴリのみ指定してプレビューします。

最後に有料版の案内がでます。

[次]へをおします。

カテゴリを選びます。

最後に適用しておしまいです。

デフォルト画像で、Quick Featured Imagesのカテゴリのアイキャッチを変える

アイキャッチ画像 > デフォルト画像

• 1と2はチェックを入れないです。1をチェックすると投稿記事のアイキャッチが優先されなくなります。2は記事の画像を使う設定のようです(未検証)。
• カテゴリ指定は3です。画像選択で画像を選びます。
• タクソノミーはカテゴリ。
• 値はカテゴリ名。
• Add Ruleを押すと他のカテゴリも指定できます。
• 最後に[ 変更を保存 ]します。

仕様はCategory Featured Imageと違って強制的に書き換えるものではありません。functions.phpのやり方と一緒で、あくまで更新時です。たとえば引越し時などでアイキャッチ画像がないブログ100記事に、アイキャッチを一括指定したい場合はCategory Featured Imageの方がよさそうです。

Category Featured Imageで新規カテゴリに個別で画像を割り当てる方法

投稿一覧 > カテゴリ一覧 > 画像を割り当てたいカテゴリを選ぶ

カテゴリの記事が表示されますので、その画面で割り当てます。Quick Featured Imagesをインストールすると、個別記事を開かなくても投稿一覧の画面で個別に割り当てることができます。

カテゴリを分けたときなどに大変便利です。即時反映されます。

WordPressのアイキャッチをデフォルト指定/カテゴリ別するプラグイン【乗り換えの歴史】

Default Thumbnail Plusはアイキャッチが自動設定できる大変便利なプラグインです。長らくお世話になっていましたが、更新されていないのとパフォーマンス(プラグインの負荷を調べると重い)があまりよろしくなかったため代替案を検討しました。この記事の初稿は2015年です。

結局、次のような順番で乗り換えて、現在はQuick Featured Imagesです。

Default Thumbnail Plus > functions.php > Category Featured Image(試しただけ、サイト移転時などは使い所はある) > Quick Featured Images

ただ、パフォーマンスの問題を置いておけば、Default Thumbnail Plusはよくできたプラグインだったなと改めて感じましたね。懐かしい。

Quick Featured Imagesの使い方(最新)

長くなりましたので、別記事にしました。

【WordPress】Quick Featured Imagesの使い方【plugin】

Quick Featured Imagesの覚書です。他にも似たようなプラグインとして次のようなものがあります。【WordPress】Quick Featured Imagesの使い方【plugin】Quick Featured Image

ebookbrain.net

Category Featured Imageでカテゴリのアイキャッチを自動設定

仕様に癖があるが引っ越し時に使える

こんなプラグインがいつのまにかでていました。使い方はインストールすればすぐわかるはず…。

Category Featured Image

カテゴリー単位で投稿用のアイキャッチ画像を指定します。

ja.wordpress.org

Bulk Media Register(Media from FTP)の作者さまですね。

【乗り換え】Flash Uploader → Media from FTP → Bulk Media Register《Wordpressのプラグインの使い方》

FTPからアップロードした画像をメディアライブラリに登録するにあたり、結構昔にFlash Uploaderを使っていました。そのあと、Media from FTP → Bulk Media Registerと乗り換えています。任意のフォルダ

ebookbrain.net

16user

個別指定は不可だけど…

Default Thumbnail Plusとは少し仕様が違うようです。

functions.phpでデフォルトとカテゴリのアイキャッチを対応する(2代目プログラムで実装)

Quick Featured Imagesでできるようになったため、以下はプログラミングに興味がある人だけですかね…。

デフォルト

まずはデフォルト画像から。以下のコードになります。

/************************************
** アイキャッチのデフォルト
************************************/
function default_featured_image( $post_id ){
	// post投稿かつアイキャッチ画像が設定されていない場合
	if ( get_post_type( $post_id ) == 'post' && !has_post_thumbnail() ){
		// カスタムフィールド情報を更新してアイキャッチ画像を追加
		update_post_meta( $post_id, $meta_key = '_thumbnail_id', $meta_value = '603' );
	}
}
add_action( 'save_post', 'default_featured_image' );

覚書ついでにめもしておきます。update_post_meta はカスタムフィールド情報を更新する関数です。

アイキャッチ画像はpostmeta のテーブルに格納されています。

save_postはフックで投稿の新規追加・更新時に実行される関数です。つまり、記事を更新しないとアイキャッチ画像は更新されません。

meta_valueの調べ方は以下のとおりです。

メディア > ライブラリ > 使う画像を選択 > さらに詳細を編集(クリックはしない)

マウスオーバーすると画面左下にURLが表示されてIDが確認できます。

プログラミングは解釈しただけで、こちらのコードを基本的にそのまま拝借しました。

リファレンス 【WordPress】投稿にデフォルトのアイキャッチ画像を設定する例

ありがとうございます。

時間をみてカテゴリ対応もするかもしれません。

カテゴリ(追加実装)

作ってみました。

この方法であればアイキャッチの指定がない場合のみ用意してくれます。個別指定した場合はそちらが優先されます。

/****************************************
  カテゴリごとにアイキャッチを指定
****************************************/
function auto_thumbnail($post_id)
{
    $post_thumbnail = get_post_meta($post_id, $key = '_thumbnail_id', $single = true);
    // save_postが２回呼ばれる。片方はリビジョンのようなので対策
    if (!wp_is_post_revision($post_id)) {
        // アイキャッチ の指定がない場合に限る
        if (empty($post_thumbnail)) {
            $post_cat = get_the_category();
            $cat = $post_cat[0];
            $thum_cat_id = $cat->term_id;

            //caseはカテゴリID、$meta_valueは画像ID
            switch ($thum_cat_id) {
                case 2:	//カテゴリーが●●
                    update_post_meta($post_id, $meta_key = '_thumbnail_id', $meta_value = '1');
                    break;
                case 5:	//カテゴリーが●●
                    update_post_meta($post_id, $meta_key = '_thumbnail_id', $meta_value = '100');
                    break;
                default: //デフォルト
                    update_post_meta($post_id, $meta_key = '_thumbnail_id', $meta_value = '1000');
                }
        }
    }
}
add_action('save_post', 'auto_thumbnail');

Default Thumbnail Plusと違って更新のタイミングでアイキャッチが追加される仕様です。

画像が読み込まれない

新規投稿・編集画面に入るとアイキャッチがくるくる回っている症状が発生したことがあります。凡ミスです。画像がないとき(番号の書き間違え)、そうなります。

また、MySQLのバージョンが低く致命点なエラーがでていたとき、うまくいかなったので最新版に更新しました。

Default Thumbnail Plusの使い方(初代・仕様は好き)

wordpressのアイキャッチ(サムネイル)をカテゴリ別・タグ別に指定するプラグインDefault Thumbnail Plusがあります。

アイキャッチの管理が楽になるDefault Thumbnail Plusの使い方と公式

このプラグインを使うと毎回アイキャッチを何にしようか悩む必要がなく楽です。カテゴリごとにとりあえず指定しておいて、個別でどうしても変えたいものだけ追加する感じでしょうか。

公式です。

Default Thumbnail Plus

Add a default thumbnail image to post's with no post_thumbnail set.

wordpress.org

使い方は管理画面から画像を設定して、そこにカテゴリやタグを指定すればいい簡単なものですが、プログラムの優先度がどうなっているかが大事かなという気がしました。Default Thumbnail Plusの優先度について、軽く調べました。

優先度の検証

「Default Thumbnail Plus内の優先度はどうか？」という点ですが、どうやらレイアウトの上の方が優先度が低いようです。つまり、Default Thumbnail Plusのデフォルトの画像が１番優先度が低いです。これはOKです。

タグとカテゴリを両方設定した場合、タグの方が優先度が低いです。保存すると、タグ→カテゴリに順番でソートされます。これはちょっと困ることにたまにあります…。

Default Thumbnail Plusの優先度　まとめ

優先度が高い順にならべます。

• 個別記事のアイキャッチ
• Default Thumbnail Plusのカテゴリ
• Default Thumbnail Plusのタグ
• Default Thumbnail Plusのデフォルト

タグとカテゴリ、両方指定する可能性があり、その場合、ちょっと微妙なんですよね^^;

解決方法としては、タグのみを使うか、カテゴリのみを使うか、タグ指定しているものはカテゴリを指定しないか、phpのコードを書き換えてしまおうか、などなど。カテゴリと個別記事に指定する方法もありますが、個別は枚数が多くなると、ちょっと面倒くさくなります。それだったらタグのみの方がよさそうかも…。カテゴリが全部同じ画像は、ちょっと無理がでてくる気がしますし。

Default Thumbnail Plusの除外

Excluded postsに番号を入れるとOKです。トップページはアイキャッチがいらない場合があります。

Default Thumbnail Plusのバグ

ついでにバグっぽいものの発見してしまいました…。
中途の画像を削除して保存した場合、これ、ちょっとおかしいですよね^^;
使い方も簡単で便利なプラグインなのですが、この点だけちょっと気をつけて使おうと思います。

ちなみに、画像の消去ではなく、差し替えでいけばいいのかな、と。

導入したプラグインも導入を見送ったプラグインも整理するために書いておきます。採用したプラグインのみ知りたい場合は、WP Fastest Cacheの項まで読み飛ばしてください。

全体像を把握するための基礎知識

高速化の基本的な知識はこちらのサイトがわかりやすいです。

WordPress高速化｜1秒前半で表示させるための8つ＋3つの方法を解説

WordPressの数少ない欠点の一つは、サイトの表示速度が遅くなりがちなことだ。サイトの表示速度が遅いとユーザビリティが低下し、SEOにも悪影響を与えかねない。本記事では、表示速度を高速化させる方法を紹介している。

lucy.ne.jp

丸ごとバックアップ

キャッシュ系のプラグインは他のプラグインよりトラブルが多いため、Wordpressを丸ごとバックアップ取りました。
現在はクラウドでバックアップを取るのがおすすめです。

《BackWPup vs UpdraftPlus》DropboxやGoogleドライブでWordpressの丸ごとバックアップ

googleドライブやdropboxでwordpressのバックアップを取る２つのプラグインを紹介します。そして、どのプラグインとどのストレージサービスを組み合わせればいいのかを徹底吟味・比較していきます。ストレージサービスにバックアップが

ebookbrain.net

2user

レンタルサーバーとの相性を確認する

まず、うちはWpxを使っていないため、関係ないのですが、ぐぐると特によくでてきたのがWpxのトラブル。

Wpxは独自のキャッシュシステムを持っているようです。そのためキャッシュ系のプラグインを導入すると、バッティングして使えないと想像できますね。どのプラグインでもダメと書かれていましたね。。

そして、さくらインターネット、ミニバードやファイアバードなどのネットオウル系のトラブルもちらほら見かけました。 これらのレンタルサーバーは全部借りているため、、キャッシュプラグイン選びに慎重になりましたね。。。

それでは、前置きはこのぐらいにしてキャッシュ系のプラグインを取り上げていきます。

quick cacheはZenCache Proに移行。ただしライセンスが難

quick cacheはFind Jobが採用していましたね(若干、古い記事です。)。

403 Forbidden

www.find-job.net

比較的トラブルが少ない作りがよいプラグインのようなので、まずquick cacheから調べました。

しかし、公式を見たらすでに別プラグインになっているようです。
WordPress › Quick Cache (Speed Without Compromise) « WordPress Plugins

新しいプラグインはこちらです。
WordPress › ZenCache « WordPress Plugins

新しいプラグインになったはいいのですが、無料版と有料版がでているようです。 となると、無料版には当然制限ががかかっているため、有料版も含めて検討した方がよさそうです。この有料版のライセンスの条件が個人的に微妙でやめました。

キャッシュプラグインQuick Cache ProがZenCache Proになりライセンス形態が変わったので調べてみた【WordPress】 | ノート100YEN.com

このブログはWordPressで構築しています。WordPressは何かと使い勝手はいいですが、アクセスが来るたびに動的にページが生成される仕組みの為、htmlサイトなどに比べるとどうしても表示が重くなってしまうという欠点があります。そこで

note100yen.com

海外のプラグインは、無制限ライセンスでこの値段はよくあります。 1年のサポートなんかが多いので、3年のサポートは比較的良心的です。有料でもいいかなと一瞬思ったのですが、ただ、あとからサポートが年額になるのは面倒でもあり。。 １回きりならいいんですけど、ね。

選択肢としては考えたのですが、代替によいプラグインが見つかったため、辞めたという結論になりますね。

W3 Total Cacheも導入を見送り

W3 Total Cacheも導入を見送りました。

W3 Total Cacheは、自分が借りている２つのレンタルサーバーでトラブルがあるようなので、残念ながら導入を見送りました。500のInternal Server Errorになります。

試していないのでわかりませんが、設定次第で切り抜けられそうな気もします。ブラウザキャッシュは結構怖いですね。

高速化をはかるためにベストだ、という回答もありました。スピードなどの比較は、こちらの記事なんかは参考になりますね(しかし、この記事にはあるプラグインが含まれていません)。

http://www.dashboardjunkie.com/test-of-wp-caching-plugins-w3-total-cache-vs-wp-super-cache-vs-quick-cache

www.dashboardjunkie.com

どちらかと玄人志向の人はW3 Total Cacheを採用している人が多いですね。

WP Super Cacheはすぐに導入を見送り

WP Super Cacheも同じようなトラブルがあります。 W3 Total Cacheより設定が優しいようですが、同じようなトラブルがあるならあまり変わりません

個人的には、WP Super CacheとW3 Total Cacheなら、W3 Total Cacheかを取ります。ただ、現在は他のプラグインを採用しています。

WP Super Cacheについて調べたら、キャッシュの豆知識として抑えておいた方がいい基本がありましたので貼っておきます。わかりやすい例ですね。

ほんとうは怖いWP Super Cacheの話 | 高橋文樹.com | プログラミング

WordPressで一般ユーザーのログインを伴うサイト（ECサイト、SNSなど）を作っている方も多いと思いますし、そういった依頼を受けることも多いのですが、最近「バグです！」という報告を受けてよくよく調べたらWP Sup

takahashifumiki.com

うちであった事例もひとつ紹介すると、wordpressにwarningが表示されていました。warningを修正して取ったはずなのに、またWP上に警告がでていたのです。実はキャッシュのプラグインが原因じゃないのかとクリアしたらあっさりとなおりました。要はWP上に一瞬だけログを表示してものがキャッシュされてしまったのですね。それまでみんなに表示されていたんじゃないの、と思ったりしましたね。忘れていたら大変ですね。

WordPressをカスタマイズしている際に、このような事態が必ず発生するため、キャッシュのクリアは必要です。忘れていても一定期間でクリアするような設定にしておく必要がありそうです。

私みたいなWeb素人がカスタマイズする際には、気をつけないといけませんね。。キャッシュが残っているのは、他のプログラムでもよくある問題ですけど。

あと、キャッシュ系のプラグインをアンインストールする際にも注意が必要なため、そこがわかって導入する必要がありますね。

WP Fastest Cacheを採用!他のプラグインを比較すると!?

以前は、Quick CacheとW3 Total CacheとWP Super Cacheの3つを比較することが定番でしたが、 現在はWP Fastest Cacheも選択肢にいれた方がいいです。

自己主張ではありますが、自ら比較表を公開して「おれのプラグインは最強なんだ」と、自信を持って作成しているようです、笑。

WP Fastest Cache – WordPress Cache Plugin

The simplest and fastest WP Cache system

wordpress.org

自己主張だけじゃあれなので、一応、他の情報源も軽くあさりました。ベンチマークテストの結果はこちらにも公開されています。

Just a moment...

wpdevshed.com

WP Fastest Cacheはみればすぐわかるぐらい初心者むけです。多言語化対応で日本語も対応しています。そして、実際に効果も高いですかね。実際、設定したみたところ、Gzip圧縮はかなり効きます。

ブラウザキャッシュは本当にそのチェックいれていいのか500になるかもしれんぞ、という警告もでるため細かい点に気配りも効いています。

さらに、カスタマイズなどの作業中に、キャッシュをクリアすることはわりとある気がするので、メニュバーにキャッシュのクリアがあるのも、使いやすく気に入っています。

(追記)カスタマイズしている人向けの注意事項になりますが、is_mobileやwp_is_mobileの関数で切り分けている場合、「モバイルユーザーに対してキャッシュを表示しない」のチェックをいれましょう。このチェックをいれない場合、たとえばPCのページが表示された際にキャッシュされ、そのキャッシュがスマホユーザーに表示されるケースが当然のごとく起こります。スマホのみリンクやバナーを表示している場合、そのバナーやリンクが表示されなくなります。もちろん他のプラグインを利用する場合もこのあたりは検討する基本事項になりますね。

テーマによっては表示崩れが起こるかもしれませんね。

モバイルキャッシュを生成したい場合、有料プラグインにする必要があります。そんなに高くはありませんね。

個人的にはWP Fastest Cacheが1番おすすめです。素人向けでもあります。

高速化と安全性を両天秤にかける

キャッシュ系のプラグインは、いろいろとトラブルが多いため、 必ずしも高速化を最優先にせず、安全・安定性と両天秤にかけて使っています。 簡易的なプラグインを使っても技術の裏付けがないと、トラブルに巻き込まれる可能性はあります。

A判定の100%を目指すとかせず。あまり無茶せず。面倒なのもあります(^^;

アクセスが急激に伸び、ちょっと遅いなと感じるサイト以外、 キャッシュプラグインはいれていません。

少し詳しくなってから、チェックボックスをいれた方がいいかもしれません。 詳しい人ほど怖さをしっている気がしますね。まあ、少しできるエンジニアであれば、何かあっても軽々、対応するんでしょうけど…。

レンタルサーバーの引越しは、大してスペックが変わらないものの場合、手間がかかるうえに よくなるか悪くなるかわからないこともあります。ただ、最近ssbのレンタルサーバーがありますけど、これは体感的に効果がある気がします。mixhostなどですね。

比較！xserver(エックスサーバー)より安いのはロリポップ/シンレンタルサーバー!?

レンタルサーバーの比較です。 比較！xserver(エックスサーバー)より安いのはロリポップ/シンレンタルサーバー!? 項目エックスサーバーシンレンタルサーバーロリポップ料金（月額）990円～770円～220円～（WordPress利用可能

mh-story.sakura.ne.jp

たまにいるのは100円でも高いプランに引っ越せば価格相応の結果が得られるという勘違いする人たちがいるですが、まったくそんなことはないでしょう。お金ほど物差しとして不確かなものはないかも^^;

特に安価のレンタルサーバーは多少高いものに乗り換えても必ずしもよい結果が得られるとは限りません。高いプランに引っ越せば速くなるというのは幻想であることも多いため、引っ越す場合は本当に速度が速くなるのか技術的な裏を取る感じですね。

画像の最適化はEWWW Image Optimizerではなく、Jpeg miniで代用、ImageOptimで画像を最適化

EWWW Image Optimizerという画像の最適化により高速化をはかるプラグインがあります。

EWWW Image Optimizer

Comprehensive image optimization with WebP, AVIF, Lazy Load, and more. Optimize images automatically for Faster Sites an

wordpress.org

EWWW Image Optimizerは複合キーワードで不具合やエラー、重いというキーワードがでてきたため導入を見送りました。ただ画質のクオリティは高い方が好きなタイプなので元の画像を減色して圧縮することにしました。この方がトラブルが起きないためです。

画像を後から読むこむLazy Load系のプラグインは、どれがおすすめ!?AMP化との相性の問題

後から画像を読みこむプラグインで高速化はしています。この方法はトラブルが少ないためおすすめです。ただし、AMP化すると画像が表示されない等のトラブルがあって以前困りました。そのあたりは要確認です。

Lazy Load系のプラグインはたくさんでていますよね。

Best Lazy Load Plugins to Make Your WordPress Site Faster

Sites with a ton of images can take forever to load. Lazy loading can significantly speed up your site.

wpmudev.com

ただし、有名なLazy Loadは更新されていません。他の多くのプラグインも同様です。「BJ Lazy Load」は更新されていますが、高速でスクロールさせると画像の表示が追いつかない場合があるようなのでやめました。

[試] 速いは正義！WordPressプラグイン Unveil Lazy Load | 表示速度改善のためのこだわり施策を適用

サイト表示の速さは正義です。Webサイトの表示速度改善方法の一つとして、画像の遅延読込があります。WordPressでは、プラグインのLazy LoadやBJ Lazy Loadが有名ですが、より表示速度の改善にこだわったプラグインUnve

marubon.info

日本人が作っているUnveil Lazy Loadを採用することにしました。

Unveil Lazy Load

Unveil Lazy Load is a WordPress Plugin whitch makes lazy-image-load possible to decrease number of requests and improve

wordpress.org

追記です。その後、Unveil Lazy Loadが更新されず、Lazy Loadが更新されたので、今はLazy Loadに乗り換えています。どちらのプラグインもよいプラグインという気がします。有効化するだけでOKです。オンオフ両方試すと表示が変わったことがわかると思います。

Lazy Load

ページ読み込み時間とサーバー帯域幅を向上させるために画像を遅延読み込みする。画像は、ユーザーが見えるときにのみ読み込まれます。

ja.wordpress.org

ちなみに、wordpressのテーマやsimplicityやcocoonはlazy load系の機能はテーマ内に盛り込まれています。

処理負荷が高いプラグインを調べる方法

処理負荷が高いプラグインを調べる方法は、P3 (Plugin Performance Profiler) が有名ですね。

P3 (Plugin Performance Profiler)

どのプラグインがサイトの速度を低下させているかを確認しましょう。このプラグインは、サイトのパフォーマンスレポートを作成します。

ja.wordpress.org

使い方はツール > P3 Plugin Pofiler > Start Scan > Auto Scan

初回、うまくいかずP3 (Plugin Performance Profiler)の値だけが高い場合があるようです。2回トライしてみるといいかもしれません。解析時間は数分です。

負荷が高いプラグインは常時チェック系のものです。Webに限らずプログラミングはなんでもそうだと思いますが。WordPress Populae Postsが重いのは有名ですけど、YARPP(Yet Another Related Posts)やBroken Linc Checkerあたりも重たいですね。

有名なところだとContact Form 7も値が高いですかね。他にはDefault Thumbnail PlusやPretty Link LiteやScroll Back to Top
やPage Builder by SiteOriginなど。どこまで許容するかですかね。

P3 (Plugin Performance Profiler)は更新されていません。プラグインインストール前と後で比較して調べるのなら、Query Monitorもありますね。

Query Monitor

Query Monitor - WordPress と WooCommerce 用開発者ツールパネル

ja.wordpress.org

WordPress Populae Postsの軽量化

WordPress Populae Postsはめちゃ重く、アクセス負荷が高くなるとレンタルサーバー会社から改善策として外すそう警告がくる場合もあるみたいです。

代替としてJetpack Post ViewsやSimple GA Rankingがありますけど、やっぱりWordPress Populae Postsがよかったためこちらで軽量化の方法を模索します。

(追記)cocconはプラグインなしでカテゴリ別の人気記事が独自に表示できますからいいですね。sangoやswellにない利点ですね。今はこの機能を使っているためらくちんです。

cocoon以外の人は次の手順です。

設定 > WordPress Popular Posts >　ツール > ログ上限 > 「無限」を「データ保存期間」に変更

日付がでるため、とりあえずデフォルトの180日に。無限で取っておきたいほど大事なものでもないので、いらないものは捨てます。

データサンプリング > 「無効」から「有効」

デフォルトでは、WordPress Popular Posts はすべてのサイト訪問を毎回データベースへ保存します。一般的な小〜中規模サイトでは問題はありませんが、大規模またはアクセスが多いサイトではデータベース書き込みの連続によりパフォーマンスに影響が出る可能性があります。

と説明があります。毎回じゃなくざっくりでいいですね。。有効にすると「サンプル率」がでます。

大規模またはアクセスが多いサイトにはサンプル率 100 を推奨します。

と書かれているため100にします。この設定は100人くると1書き換えるみたいな感じみたいですね。

他には1番下にデータの削除項目がありますかね。

(追記)データサンプリングを100にしたはいいのですが、ウィジエットの計測期間が24時間だとざっくりとしすぎたせいなのか、だいぶ表示されるものが変わってしまったため、7日間の計測で表示することにしました。細かい検証はしていませんが、いい感じになったため、とりあえずこれで様子見します。

(追記)このサンプル率を100にすると、ビュー数(stats_views)も100単位になってしまいますね。ページビューの機能は使いにくくなってしまいますが、致し方ありませんね。負荷対策の方が優先度が高い気がします。

simplicityやcocoonを使えばキャッシュ系のプラグインを減らせる!?

キャッシュ系のプラグインを導入しているサイトもありますが、あまり使っていないサイトもあります。同じレンタルサーバーでも、プラグインやテーマによって結構変わると思います。

Simplicityは結構早いと思います。

Simplicity

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

wp-simplicity.com

わいひらさんはプログラミングが結構、わかっているためか、高速化を意識して設計している気がします。そのため、なんとなく想像はつくのですが、キャッシュ系のプラグインと相性が悪いようなので、独自の設定をする必要がありそうです。また、lazy loadの機能は含まれていて、カスタマイズ欄にあります。

コピペ一発でSimplicityを結構高速化する方法

Simplicityを高速化し、さらなるパフォーマンスアップをする方法を解説します。高速化には、ブラウザキャッシュの設定と、リソースを圧縮の設定を行います。たったこれだけのことですが、かなりの高速化が図れます。例、Simplicityに今回

wp-simplicity.com

あと、Stinger5もありますけど、個人的にはSimplicityファンですね。

このサイトは、simplicityの後続テーマcocoonを採用していてcocoon任せになって楽しています。。^^;

cocoonには高速化機能があります。もちろんcocoonのキャッシュ機能をよく理解した上でキャッシュ系のプラグインと併用し、さらなるパフォーマンスの向上を目指すのはありです。

AMP化による高速化とキャッシュプラグインの併用

スマホ(モバイル)はAMP化するとすごく高速化されます。ただ、AMP化されたページが表示されるのは、検索結果からのアクセスで最初のページのみなので、キャッシュ系のプラグインを併用する意味はあります。

wordpressのテーマにsimplicityを採用している場合、simplicityはテーマがAMP化に対応していてカスタマイズ欄からチェックをいれるだけです。

まだ他にもいろいろとプラグインや高速化の手段はあるでしょうが、今回はこんなところにしておきます。