導入しているWordPressおすすめプラグインです。
紹介するプラグインは
導入すると便利なプラグインです
プラグインには、似てる機能、種類さまざまありますが
実際に導入している9種類のプラグインです
- Contact form7（問い合わせ作成）
- wp multibyte patch（不具合予防）
- Broken Link Checker（リンクエラー修正）
- Revision Control（パフォーマンス最適化）
- EWWW Image Optimizer（画像圧縮）
- Jetpack（ツイッター連携）
- Child Theme Configurator（子テーマ作成）
- Redirection（エラーページを自動転送リダイレクト）
- wp fastest cache （wordpress 高速化）
参考にしていただけたら幸いです
- 結論：厳選 wordPressおすすめプラグイン９選
- contact form 7 必須
- wp multibyte patch とは
- broken link checker
- revision control
- 画像 圧縮 プラグ イン
- jetpack Twitter 連携
- Child Theme Configurator
- redirection プラグイン 使い方
- wordpress 高速化 キャッシュプラグイン
- ps auto sitemap
- ps auto sitemap 使い方
- PS Auto Sitemap 表示されない 対処法
- ps auto sitemapスタイル 一覧
- PS Auto Sitemap 代わり cocoon sitemap
- フリー 画像 登録不要 サイト
- 画像 編集 ソフト フリー おすすめ
- まとめ
結論：厳選 wordPressおすすめプラグイン９選
実際wordPressに入れているプラグインです
- Contact form7（問い合わせ作成）
- wp multibyte patch（不具合予防）
- Broken Link Checker（リンクエラー修正）
- Revision Control（パフォーマンス最適化）
- EWWW Image Optimizer（画像圧縮）
- Jetpack（ツイッター連携）
- Child Theme Configurator（子テーマ作成）
- Redirection（エラーページを自動転送リダイレクト）
- wp fastest cache （wordpress 高速化）
９種類の他にも
- サイト評価が上がる
サイトマップ自動作成プラグイン - バックアップ設定が簡単にできる
バックアップファイル作成プラグイン
などもあるのでおすすめします
- サイトマップ簡単設定プラグインはこちら
- バックアップ設定プラグインはこちら
参考にしていただけたら幸いです
contact form 7 必須
Contact form7はWordPressに問い合わせページを
作ることができるプラグインです。
自分で問い合わせページを作成する場合には
プログラム言語、HTMLやCSSの知識が必要になります。
しかし、Contact form7を使えばHTMLやCSSの知識がなくても
簡単に設定できます
日本だけでなく、海外でも広く使われています。
Contact Form 7のメリットは、
- 導入や設定が簡単
- 自動返信メールの設定もできる
- 利用者が多いので、設定がわからない場合でも
ネットで検索することができる
の3つです
Googleアドセンスはご存じですか？
Googleアドセンス審査には
Contact form7などで問い合わせフォームを作成しないと
Googleアドセンス審査に受かりにくいです
Googleアドセンス審査申し込みはこちら
これから、ブログ運営をしていくと考えている方には
Contact form7は必須です
wordpress 固定 ページ 追加
WordPressには、問い合わせフォームがないので
プラグインを使って作成していきます。
お問い合わせフォームは、カテゴリーに属していないので
固定ページに設置していきます。
まず固定ページを作成します。
固定ページ→新規追加をクリックします。
タイトルを お問い合わせ と入力して下書きにします。
これで固定ページに お問い合わせ ページができました。
まだこの段階ではホームページ上に表示されていません
プラグインインストール
WordPressには、問い合わせ機能が存在していないので
プラグインを使って機能を追加していきます。
プラグイン→新規追加→プラグインの検索にcontactform7と入力します。
富士山のマークです。
今すぐインストールをクリックして→有効化をクリックします。
有効化をするとwordPress管理画面左側のメニューに
お問い合わせ が追加されています。
メニュー お問い合わせ をクリックします。
コンタクトフォーム１をクリックします。
タイトルのコンタクトフォーム１を お問い合わせ に変更します。
お問い合わせに変更後 保存をクリックします。
contact form 7 ショート コード
緑枠のショートコードをクリックするとコードが選択されるので
右クリック→コピーでショートコードのコピーをします。
下書きにした固定ページに移動してショートコードを貼り付けます。
貼り付けたら公開をクリックします。
wordpress 固定 ページ 表示
wordPress管理画面に戻り
外観→メニューをクリックします。
メニュー項目を追加からすべて表示タブ→
お問い合わせ にチェックを入れてメニューに追加をクリック
メニュ構造にお問い合わせがあるのを確認をして
メニューを保存をクリックします
固定 ページ 確認
サイト トップページ上部にある固定ページに
お問い合わせ が
表示されているのでクリックします。
クリックすると
お問い合わせフォームが表示されます
フォーム 修正
表示された お問い合わせ の中身を修正していきます。
デフォルトでは、フォームに 題名 が入っています。
題名 はいらなので消去していきます。
wordPress管理画面→お問い合わせ→お問い合わせをクリックします。
フォームの赤枠で囲った 題名 部分を消します。
電話番号 フォーム
題名 を消去したので空白ができました。
ここに 電話番号 を入れていきます。
テンプレート 青枠の電話番号では
全角入力するとエラーが出てきてしまうので
どの文字でも使える赤枠 テキストを使って作ります。
テキストをクリックします。
電話番号は任意にしたいので必須項目にチェックは入れません。
項目タイプ名前 に tel と入力します。
項目タイプ デフォルト値は
固定ページ お問い合わせ をクリックした時に
入力されている値なので空白にします。
「タグを挿入」をクリックします。
メールアドレスとメッセージ本文の間に
[text tel]
フォームが追加されます。
↓
このままだとフォームだけなのでラベルを作っていきます。
ラベル 作成
ラベルは、メールアドレスに似せて修正していきます。
先ほど作った[text tel]
を<label></label>で挟みます。
<label> 電話番号 [text tel] </label>
これでラベルが完成しました。
保存をクリックします。
contact form 7 メール設定
続いてメールの設定をしていきます。
メッセージ本文以外はデフォルトのままで問題ありません。
送信先を変えたい場合には送信先を変更しておきます。
メッセージ本文はメールで送られてくる内容になります。
メッセージ本文を変更していきます。
差出人：[your-name]など項目はフォームと連動しています。
先ほどフォームで消した題名：［your-subject]が
メッセージ本文に入っているので消します。
↓
フォームで作成した電話番号を追加していきます。
電話番号:[tel] と入力します。
保存をクリックします。
contact form 7 自動 返信
メッセージ本文 下にあるメール（２）に入力すると
問い合わせをした相手に
送信完了メールを自動 返信することができます。
メッセージには、あらかじめ相手に送りたいメッセージを
デフォルト値として設定しておけば
設定した内容で送信されます。
設定完了後 保存をクリックします。
contact form 7 確認 メール
設定完了後、設定が合っているか
実際送信してみてテストしてみてください。
設定が思っていたものと違うこともあります
確認メールを送り必ずチェックしましょう。
wp multibyte patch とは
wp multibyte patch（ダブリュピー マルチバイトパッチ）とは
もともとWordPressは英語で作られたシステムです
英語のアルファベットは
シングルバイト文字(半角文字 aの幅が１バイト で１バイト文字)になります。
日本語のひらがなや漢字等はシングルバイト文字ではなく
マルチバイト文字(1文字に2バイト使う文字)になります
シングルバイト文字のところにマルチバイト文字が入力されると
ファイル名の変換バグが起きたり、文字化けしたり文字数が正しく拾えくなるなど
不具合が生じる可能性があります。
この不具合を防いでくれるプラグインがWP Multibyte Patchです。
WordPress5.0以降からWP Multibyte Patchプラグインが
標準搭載されなくなりました。
過去に標準搭載していたもなので日本語環境で正しく作動させるために
入れておけば間違いないので有効化しておきましょう。
wp multibyte patch 設定
wordPress管理画面→プラグイン→新規追加→
プラグインの検索にWP Multibyte Patchと入力します。
表示されたら今すぐインストールをクリックします。
インストールが完了したら有効化をクリックします。
WP Multibyte Patchを有効化をすれば設定完了です。
broken link checker
Broken Link Checkerは
リンクの記載ミス
サイトのリンク切れをチェックをしたり
お知らせをしてくれます
ブログを作成していくと
リンク切れを常に監視していくのは不可能です。
リンク切れがあると、読者満足度が高くならず
ガッカリさせてしまいます
同時にSEOも好ましくありません。
ブログの記事数が増えてくれば
リンクも増えてくるので
必須のプラグインです
このプラグインを導入することでリンク切れを
一括チェックをしてくれるので
監視がとても楽になります。
- リンク切れのチェック
- メールでリンク切れを通知してくれる機能
- リンクエラーに自動で装飾（打ち消し線など）を適用したり
- 検索エンジンがリンクエラーを認識しないようnofollowを付与したり
- サーバーの負担の制限もしてくれます
５つの機能があるので入れておきましょう。
Broken Link Checker 設定
wordPress管理画面→プラグイン→新規追加をクリックします。
プラグインの検索にBroken Link Checkerと入力します。
表示されたら今すぐインストールをクリックした後
有効化をクリックします。
有効化するとwordPress管理画面の下側に
Broken Link Checkerの項目が出てくるので確認してみてください。
リンクを貼り付けたばだとエラーは無いと思います。
wordPress管理画面からツール→リンクエラーを選択します。
リンクエラーの一覧画面で、表示されているエラーにマウスを合わせていくと
- 「URLを編集」
- 「リンク解除」
- 「リンクエラーではない」
- 「リンク切れから解除」
- 「再確認」
の5つのメニューが表示されます。
5つのメニューから選択して修正していきましょう
revision control
リビジョンとは、Wordpressに標準搭載された
自動バックアップ機能のことです。
WordPressは投稿画面で記事を書いていると
作成途中で下書き保存してくれます。
何も設定をしていないと
リビジョンの数が
どんどん増えていきます
リビジョンは以前の状態に戻すことが
できるのでとても便利なんですが・・・
WordPressの初期設定では
リビジョンが無限に保存される状態になっています。
何回も保存更新しているとリビジョンが増えすぎてデータベースが肥大化
ブログの表示速度が遅くなりパフォーマンスに悪影響を及ぼします。
便利なんですが、厄介な機能がリビジョンです。
そんなリビジョンを、調整してくれるのがRevision Controlです。
Revision Controlを使えば好きな数に設定が
できますのでプラグインを入れておきましょう
Revision Control 設定
wordPress管理画面→プラグイン→新規追加をクリックします。
プラグインの検索にRevision Controlと入力して検索します。
検索表示されたら→今すぐインストール→有効化をクリックします。
有効化されたらwordPress管理画面の設定からリビジョンをクリックします。
リビジョンをクリックするとデフォルトの状態では
リビジョン最大保存数：無制限になっています。
お好きな数に変更してください。
自分は最大保存数：3に変更しました。
↓
リビジョン保存数を変更したら
変更を保存をクリックします。
以上で設定は完了です
とても簡単です
ブログを立ち上げた初期にリビジョンを最適化しておきましょう。
画像 圧縮 プラグ イン
EWWW Image Optimizerとは、画像を劣化させることなく
アップロード時に自動で画像サイズを圧縮調整してくれるプラグインです。
画像のファイルサイズを小さくすることでサイトの表示速度が速くなり
ユーザーの離脱率も低くなります。
また、メタデータの削除もしてくれます。
メタデータとは、撮影場所やカメラ情報などを含む情報が記載されているデータのことです。
EWWW Image Optimizerを導入することで
- 画像を軽くして
- 表示速度を上げる
- 個人情報保護
ができるので設定したいプラグインです
ewww image optimizer 設定
wordPress管理画面→プラグイン→新規追加→
プラグインの検索にEWWW Image Optimizerと入力して検索します。
表示されたら今すぐインストールをクリックして→有効化をクリックします。
wordPress管理画面の設定からEWWW Image Optimizerをクリックします。
設定するところは少なくほぼデフォルト値で大丈夫ですが
2カ所 確認してください。
ewww image optimizer 設定 基本タブ
基本タブは、メタデータを削除のみチェックを入れましょう。
てあとはデフォルト設定で大丈夫です。
メタデータとは、撮影場所やカメラ情報などを含む情報が
記載されているデータのことです。
ewww image optimizer 設定 変換タブ
変換タブは、変換リンクを非表示にチェックは入れておきましょう。
他の項目はデフォルトのままで大丈夫です。
変換リンクとは画像形式の変換を意図的あるいは
間違ってできないようにする設定です。
2か所確認が完了したら
変更を保存をクリックします。
jetpack Twitter 連携
JetPackは、WordPress公式の高機能プラグインです。
WordPress公式のプラグインですが
WordPressにプリインストールされていません。
高機能すぎて、使いこなせません・・・
JetPackは「WordPress.com」向けに提供されていた機能を
インストール型のWordPressでも使えるようにしたプラグインです。
WordPressでのサイト運営に必要な機能が揃っています。
管理画面も日本語に対応しているので
わかりやすいのでぜひ設定してみてください。
WordPressのアカウントには
- サイトにログインするためのアカウント
- WordPress.comが作ったサービスを使う
2種類アカウントがあります。
かなり迷うと思いますが
ツイッターと連携を考えている人はとても便利ですので
設定してみてください。
プラグインのインストール
ワードプレス管理画面を開いて
プラグイン→新規追加→プラグインの検索にjetpack-wpと入力して検索します。
表示されたら右上に表示されている「今すぐインストール」をクリックして
インストールされたら有効化をクリックします。
jetpack 設定
「jetpackを設定」をクリックしていきます。
WordPress.comで続ける Googleで続けると表示されるので選択。
どちらでも大丈夫です。
WordPress.comで続けるをクリックするとサイトからのアカウント情報を持ってきてくれますので設定は簡単になります。
Googleで続けるをクリックしました。
途中でよくわからなくなったので一度無効化をして
再度「wordpressで続ける」をクリックしてみましたが
Googleのアカウントを使っていたので
結局どちらでも変わりませんでした。
Googleがわかりやすいんですが
自動で長いユーザー名が割り当てされます。
気になる人はWordpress.comで続けることをおススメします。
自動で作成されたユーザー名も後で変更できます。
WordPressのアカウントは自分のサイトにログインするためのアカウント
今回作るアカウントはWordpress.comが作ったサービスを使うアカウント
別物になるのでご注意ください。
Googleアカウントでログインしていきます。
GoogleでログインするとGmailにメールが送られてくるので
メールを確認してクリックします。
送られてきたメールをクリックすると
Jetpackのプランの選択画面になります。
下にある
Jetpack Frer Start for freeをクリックしてください。
これでjetpackの設定ができました。
英語になっていた場合はFreeと書いてあるところをクリックします
Jetpack 共有
ワードプレスの管理画面に戻ります。
左上に→jetpackが表示されるので→設定をクリックします。
上のタブから共有を選択します。
共有→投稿をソーシャルネットワークに自動共有をスライドさせてオンにします。
ソーシャルメディアアカウントに接続するをクリックします。
WordPress.comのサイトに飛びます
英語表記になっていました
先に日本語化をしていきます。
WordPress.com 日本語 化
WordPress.comのサイト 右上にあるアイコンをクリックします。
アイコンをクリックすると画面が変わり
左側に歯車のマークをクリックします。
（日本語に変換後スクリーンショットなので日本語化されてます。）
下の方に Englishと書いてあるのでクリックします。
日本語に変更します。
日本語を選択した後 右下のSelect Languageをクリックします。
再度、WordPress.comサイト
wordPress管理画面からjetpack→設定に行けば日本語化されています。
Jetpack 共有 ツイッター
jackpackでFacebook、Twitterなどの連携ができます。
ツイッターのみ連携させていきます。
投稿を共有したいメディアが出てくるのでツイッターを選択します。
ツイッターのアカウント設定画面が出てくるので
連携させるアカウントとパスワードを入力します。
１つしかない場合は自動で入力されています。
設定が完了するとツイッターアイコン下に
登録したアカウントが表示されます。
すべての管理者、編集者、作成者が利用できる
接続にチェックを入れます。
これで設定が完了しました。
twitter 投稿 テスト
JetpackがインストールされるとwordPress投稿画面の
右側にJetpackの緑マークが入っています。
jackpackの緑のマークをクリックすると
連携させたメディアが表示されています。
もし、jackpack緑のマークを押しても
ツイッター表示がされていない場合は、
連携がされていないのでもう一度
Jetpackの設定から→ソーシャルメディアアカウントに
接続するをクリックして
ツイッターを選択し直してみてください。
Child Theme Configurator
Cocoonでは、あらかじめ子テーマが用意されていますが
wordPressのテーマに
子テーマが用意されていないものもあります
子テーマが用意されていない場合は
自分自身で子テーマ設定をしなければいけません
親テーマに直接カスタマイズしてもいいんですが
テーマ更新があると
すべて上書きされてカスタム内容は消えてしまいます。
知識はないけど、子テーマを作っておきたい
知識がなくて、子テーマの作り方がわからない
などで、子テーマづくりをあきらめていた方は
プラグイン「Child Theme Configurator」を導入すると
子テーマが簡単に作れます
Child Theme Configurator の使い方
子テーマ作成に最低限必要なファイルは
function.php
style.css
の２つが必要です
function.php と style.css に
親テーマ呼び出し用のコードなどを記載します。
WordPress初心者では、子テーマの作り方がよくわかりません・・・・
子テーマづくりをあきらめて
親テーマに直接、追記や修正、カスタマイズをすることも
可能なのですが・・・
親テーマに直接カスタマイズすると
テーマ更新によって、すべて上書きされて消えてしまいます。
テーマは、脆弱性が発見されたり
機能の追加や修正などで親テーマ更新が行われます。
更新を行うことで新しい機能を追加したり
セキュリティの強化をします。
テーマ更新がいつ来るかわかりません
そのたびにカスタマイズし直すのは大変なので
プラグインを入れて子テーマを作成しておきましょう
有効化しただけでは設定完了しませんので設定をしていきます
子テーマ作成プラグインをインストール
Child Theme Configurator をインストールします。
wordPressメニューから「プラグイン」→「新規追加」
右上の検索窓に「Child Theme Configurator」と入力します。
プラグインが表示されたら
「今すぐインストール」→「有効化」をクリックします。
これでChild Theme Configuratorがインストールされました。
子テーマ 作成
ダッシュボード左側から「ツール」→「Child Theme」に進むと
Child Theme Configurator の設定画面が表示されます。
メニューの一番左のタブParent/ Childを選択
①「Selectan action：」から一番上の
CREATE a new Child Themeを選択します。
①の選択肢は
- 新しい子テーマを作成する
- 既存のテーマを設定する
- 子テーマをコピーする
- 既存のテーマをリセットする
の4つから選択しますが
子テーマの新規作成なので一番上でOKです
- ②子テーマを作成したいテーマを選択します
「Select a Parent Theme:」でテーマ名をクリックすると
プルダウンメニューが開くので
子テーマを作成したいテーマを選んで
「Analyze」をクリックします。
子テーマが作成可能であれば
「This theme appears OK to use as a Child theme.」
と表示されるので、④以降の項目を設定していきます。
- ④「Verify Child Theme directory:」は
子テーマのファイル名になるので
変更しなくて大丈夫です
- ⑤「Select where to save new styles：」は
子テーマ用のスタイルシートを設定します
「Primary Stylesheet (style.css) 」変更しなくて大丈夫です。
- ⑥「Select Parent Theme stylesheet handling:」
親テーマのスタイルシート呼び出し方法を設定します。
ここは下手にいじると正しく表示されないので
一番上の
「Use the WordPress style queue.」のままで大丈夫です。
- ⑦「Customize the Child Theme Name, Description, Author, Version, etc.:」
子テーマの詳細です。「Show/Hide Child Theme Attributes」
をクリックすると子テーマの詳細が表示されます。
ここもそのままで大丈夫です。
- ⑧「Copy Menus, Widgets and other Customizer Settings
from the Parent Theme to the Child Theme:」
ここにチェックを入れると
親テーマで設定してしまったメニューや
ウィジェット、カスタマイザーの内容などを
子テーマに引き継ぐ（コピーする）ことが
できますのでチェックを入れます
⑨ 「Click to run the Configurator: の
「Create New Child Theme」
をクリックして、子テーマを作成します。
子テーマ 作成方法まとめ
- 「CREATE a new Child Theme」を選択
- 子テーマを作成したいテーマを選択
- ④ ⑤ ⑥ ⑦は変更なし
- ⑧チェックを入れる
- ⑨「Create New Child Theme」をクリック
これで、簡単に子テーマ
function.php
style.css
を作成できます
phpファイルの作り方
Child Theme Configurator で
function.php と style.css の2つが
簡単に追加できました
WordPressがわかってきて
header.php や footer.phpで
カスタマイズが必要になった時でも
Child Theme Configurator を使えば簡単に
必要なphpファイルを追加できます
Child Theme Configurator のタブから
「files」を選択します。
「files」タブから必要なphpファイル
header.phpと footer.phpの2か所にチェックを入れます
Childテーマが合っているか確認して
「Copy Selected to Child Theme」をクリックすると設定は完了です。
ダッシュボード「外観」→「テーマ」から
作成した子テーマを確認し有効化してください
redirection プラグイン 使い方
ブログ記事をたくさん書いていくと、記事の書き直しや
記事の統廃合をすることになります
記事の統廃合をした結果
Googleに登録されたページが消えると
「４０４ NOT FOUND」表示になります
サーチコンソールを使うと
簡単に 「４０４ NOT FOUND」 表示になっているか確認できます
サーチコンソールの使い方・登録・確認方法はこちら
検索された記事が「４０４ NOT FOUND」では
読者も、著者もお互いに、もったいないです
読者満足度を高めるためにも
修正したページへのリンク修正
「３０１リダイレクト」設定をします
プラグインを使うと簡単にリダイレクト設定ができます
Redirection有効化
Redirection をインストールします
Redirectionは有効化しただけでは転送してくれません
wordPressメニューから「プラグイン」→「新規追加」
右上の検索窓に「Redirection」と入力します。
プラグインが表示されたら「今すぐインストール」→「有効化」をクリックします。
有効化が完了したら
ダッシュボード左側から「ツール」→「Redirection」をクリック
初期画面が出てくるので「セットアップ開始」をクリックします。
基本セットアップにはチェックを入れなくてOK
「セットアップを続行」をクリックします。
「セットアップ完了」をクリックします。
「完了」をクリックします
Redirection設定
ダッシュボード左側から「ツール」→「Redirection」をクリック
初めて開くと「オプションタブ」になっているので
「転送ルールタブ」をクリックします。
新しい転送ルールを設定します
ソースURLからターゲットURLへ自動転送されます
- ソースURL
検索表示された「４０４ NOT FOUND」
ページを入力します
相対URLと書いてありますが検索表示されたURLでも大丈夫です - ターゲットURL
修正したページ（転送先）へのURLを入力します。
転送ルール追加をクリックすると設定は完了します。
記事の統廃合をしたら
リンク先修正できる Redirection設定 をしておきましょう
モバイル対応記事
Cocoonでは自動でモバイル対応記事を作成してくれます
記事修正などした場合
ＰC画面では301リダイレクトされますが
モバイル対応記事では
リダイレクトされず「４０４」が表示される場合があります
サーチコンソールにログインして
左側にあるインデックス→カバレッジ→見つかりませんでした（404）をクリック
404表示されているアドレスが表示されているので
Redirection設定 をしていきます
ドメイン○○.com/?p=○○&=1
で修正すればモバイル対応記事もリダイレクトされます。
wordpress 高速化 キャッシュプラグイン
やっとの思いで、立ち上げたサイトが検索上位にいくためには
Googleのサイト評価基準を勉強しないといけません
Googleの評価基準のひとつに
サイトページスピードがあります
サイトページスピードとは
アクセスしたサイトの表示スピード・レスポンスを数値で表します
サーチコンソールを設定していれば
簡単に見ることが出来ます
google ページ スピード イン サイト
Googleサーチコンソールを設定しておけば
簡単にサイト表示速度を調べることができます
Googleサーチコンソールを設定していますか？
Googleサーチコンソールの登録・設定はこちら
Googleサーチコンソールに
ログインして左にある
エクスペリエンス→ウエブに関する主な指標をクリック
クリックすると pagespeedInsightsを試す が表示されるので
pagespeedInsightsを試すクリックします
クリックすると分析が始まり
しばらく待つと結果が出てきます
- ０～49
- 50～89
- 90～100
の三段階で評価されます目指すのは90～100です
もし0～４９であれば
wp fastest cache などのwordpress高速化プラグインを
導入して表示スピードを改善させましょう
ただ・・・表示速度も大切ですが記事内容の方がもっと大事です
wp fastest cache
wp fastest cacheはサイト読み込み時間を短縮させるプラグインです
サイト読み込み時間を減らすポイントは
キャッシュと呼ばれる
記事内容を保存したものを表示させることです
キャッシュを表示させることで
サイト読み込みまでの時間を稼ぎ
サイト表示速度を改善させるプラグインです
日本語にも対応しているで安心して使用できます
プラグインとWordPressテーマの相性もあるので
必ずバックアップをしてから行いましょう
本サイトで使用しているテーマCocoonにも
キャッシュ設定があります
wpfastestcacheを入れた方が
表示速度が速くなりました
WP fastest cacheを有効化しただけでは
設定完了しないので設定をしていきます
wp fastest cache インストール 有効化
WP fastest cacheをインストールするために
WordPress管理画面のダッシュボードから
プラグイン→新規追加をクリック
プラグイン検索に wp fastest cache と入力します
表示されたら今すぐインストール、有効化をクリックします
インストールしただけでは機能しないので設定をしていきます
有効化をするとダッシュボード左下に
wpfastestcacheのアイコンが出てくるのでクリックします
クリックすると設定画面が出てきます
はじめて立ち上げると
英語表記になっているので日本語表記に変更します
下にある Languageを日本語に変更して
Submitをクリックします
wp fastest cache 設定
設定チェックするところは8カ所です
- キャッシュ
- 先読み
- ログインユーザー
- モバイル
- 新規投稿
- update post
- Ｇｚｉｐ圧縮
- ブラウザ キャッシュ
キャッシュ
有効化にチェックを入れないとキャッシュされないので
チェックを入れます
先読み
先読みさせるページにチェックを入れて選択します
先読みさせるページはよく使う
- ホームページ
- 投稿
- カテゴリー
- 固定ページ
- タグ
にチェックを入れます
ログインユーザー
ログインユーザー ＝ サイト管理者なので
サイト管理者にキャッシュが表示されると記事修正
カスタマイズ内容の確認がしづらいので
キャッシュされないようにチェックを入れます
モバイル
モバイルユーザーにデスクトップ版のキャッシュを表示させると
エラーが出ることがあるのでチェックを入れて
表示させないようにします
Cocoonの場合はパソコンとモバイルが
完全レスポンシブなので
基本的にはキャッシュ設定は不要です
新しい投稿
新しい投稿にチェックを入れることで
新しい記事を投稿するたびに古いキャッシュと
新しいキャッシュを入れ替えてくれるのでチェックを入れます
clear All Cache を選択しておけば大丈夫です
updatepost
記事更新したら、キャッシュを削除する機能です
clear cache of post/pageを選択すれば大丈夫
Ｇｚｉｐ圧縮
HTML CSS などのファイルをサーバー上で圧縮して
転送量を減らして高速化する機能なのでチェックを入れます
ブラウザキャッシュ
サーバー上でなくブラウザ上でキャッシュをしてくれる機能です
ブラウザキャッシュにチェックを入れます
設定が完了したら「変更を保存」をクリックします
キャッシュの削除
wp fastest cache の設定 が完了したので
新しい記事が投稿されると
自動でキャッシュ削除してくれるようになりましたが
キャッシュの削除タブから手動で
キャッシュ削除することもできます
キャッシュの削除タブからキャッシュの削除
clear All Cacheをクリックすると
キャッシュフォルダ内のキャッシュを削除できます
また、Timeout Rules横の Add New Ruleをクリックすると
キャッシュ自動削除設定画面が出てきます
設定した時間で自動キャッシュ削除もできます
また、WordPress管理画面の
ダッシュボード上にあるアイコンをクリックしても
キャッシュを手動で削除することもできます
Cocoon サイト の 表示 速度 高速化
Cocoonには標準でサイト高速化の項目があります
Cocoon設定→高速化をクリックして
すべてにチェックを入れておけば表示が早くなります
サイト高速化によって画面崩れがおきる場合もありますので
画面崩れがおきた場合はチェックを外してください
当サイトはロリポップのスタンダードプランを使っています
ロリポップ スタンダードプランは
サーバーのソフトウエアがApache系
なのでCocoon公式ページでも
wp fastest cacheはおススメされています
ps auto sitemap
PS Auto Sitemapとは
簡単にＨTＭLサイトマップを作製できるプラグインです
サイトマップを作ると
Googleアドセンスに合格しやすくなるとも言われています
wordPressには投稿ページと固定ページがあります
投稿ページと固定ページの違いは
- 投稿ページ：読者に有益な新しい記事を増やしていく場所
- 固定ページ：サイトに必要なページ、記事を増やさないコンテンツ
サイトマップは記事を増やさないコンテンツなので
固定ページにピッタリです
手動でサイトマップを作ると
新記事・下書きにした時など
記事更新と同時にサイトマップの更新作業が必要になります
PS Auto Sitemapを１度設定してしまえば
新しく記事を作成、記事の下書化などをしても
サイトマップ更新作業が自動で作成・修正されるので
空いた時間を新しい記事の作成にまわすことができます
サイトマップ とは
サイトマップとは、サイト全体のページ構成を
地図のように一覧で記載しているページのことです
サイトマップには
- XML
- HTML
2種類あります
xml サイト マップ
XMLサイトマップは検索エンジン用のサイトマップです
新しく記事を投稿しただけではGoogle検索で登場しません
Googleの検索で登場させるには
検索ロボットにクロールしてもらい登録をしてもらう必要があります
検索ロボットにクロールして登録してもらう用のサイトマップが
XMLサイトマップです。
XMLサイトマップはプラグイン Google XML Sitemaps で
一度設定してしまえば自動で作成されますので
参考にしていただけたら幸いです
html サイト マップ
PS Auto Sitemap で作成するサイトマップは
HTMLサイトマップです。
HTMLサイトマップは
サイトの訪問者の方に見てもらうためのもので
サイト内の全ページをわかりやすく一覧にしたものです。
HTMLサイトマップがあれば
サイト訪問者だけでなくサイト制作者も
パット見で記事一覧を把握することができます
ps auto sitemap 使い方
PS Auto Sitemapの使い方はとても簡単です
PS Auto Sitemapをインストールして
「3ステップ」でサイトマップが作成できます
- PS Auto Sitemap 設定下にあるコードをコピーして
投稿記事に貼り付け1回公開 - 公開したページに表示されたIDをメモをする
- PS Auto Sitemap 設定に表示されたID番号を入力
PS Auto Sitemapのデフォルト設定です
PS Auto Sitemap インストール
wordPressに「プラグイン」
PS Auto Sitemapをインストールしていきます。
WordPress管理画面から「プラグイン」の
「新規追加」をクリックして、キーワード欄に
「PS Auto Sitemap」と入力
名前の似ているプラグインがあるので注意してください
表示された「PS Auto Sitemap」右上から
「今すぐインストール」をクリック
インストールされたら「有効化」をクリックします。
PS Auto Sitemap コード コピー
WordPress管理画面「設定」→「PS Auto Sitemap」をクリック
設定ページ下にある「ご利用方法」に注目してください
ご利用方法に書いてあるコードをコピーします。
<!– SITEMAP CONTENT REPLACE POINT –>←これをコピーします。
PS Auto Sitemap コード貼り付け
サイトマップを表示したいページに
コピーした PS Auto Sitemap のコードを貼り付けていきます
固定ページにPS Auto Sitemapのコードを貼り付ける場合は
WordPress管理画面から「固定ページ」→「新規追加」をクリック
新しい固定ページを作成します。
作成した固定ページにコピーしたコード
<!– SITEMAP CONTENT REPLACE POINT –>を
カスタムHTMLで固定ページに貼り付けます
ブロックエディターやCocoonを利用している方で
そのままコードを貼り付けをしても
サイトマップは表示されません
必ずカスタムHTMLを選択してコードを貼り付けてください。
ブロックの追加からすべて表示ウイジェットの
カスタムHTMLを選択してからコードを貼り付けます。
右側のパーマリンク設定から
URLスラッグに「pssitemap」と入力します。
URLスラッグを入力したら「公開」をクリックします。
PS Auto Sitemap 記事 ID 出力
公開が完了すると
ブラウザー上にあるアドレスバーに記事IDが出力されます
表示されたアドレスの
『POST＝〇〇〇』という部分
○○〇には数字が表示されていますので
数字を控えておいてください
今回は１６６だったので番号166を控えておきます
PS Auto Sitemap 記事 ID 入力
WordPress管理画面に戻り「設定」から
「PS Auto Sitemap」をクリックして
「サイトマップを表示する記事」に先ほどのIDを入力します
「サイトマップを表示する記事のID」とは
先程の公開した「固定ページ」のURLの部分に表示された「post＝数字」です。
(※166が表示されたので166と入力します。)
その他の設定は、デフォルト値で問題ありません。
「固定ページ」の「post＝数字」を入力したら
忘れずに変更を保存をクリックすると
サイトマップが作成されます
PS Auto Sitemap 除外カテゴリー 除外記事
サイトマップに表示したくないコンテンツが
ある場合は設定をすればサイトマップに表示されません
除外カテゴリーがある場合
wordPress管理画面から
投稿→カテゴリー→名前を選択すると
アドレスバーにカテゴリーIDが表示されるので番号を入力します
除外記事の場合も同様に
wordPress管理画面から
投稿→記事一覧→タイトルを選択すると
アドレスバーにIDが表示されます
表示された番号を PS Auto Sitemap設定画面にある
- 除外カテゴリー
- 除外記事
に番号IDを入力するとサイトマップに表示されません
PS Auto Sitemap 表示されない 対処法
「PS Auto Sitemap」を設定しても
サイトマップが表示されない場合があります。
表示されないときは３点を確認してください。
- 「google xml sitemaps」を先に入れているか
- カスタムHTMLで貼り付けているか
- サイトマップIDを入力しているか
google xml sitemaps プラグイン
パーマリンク設定のURLスラッグ「sitemap」
と入力した場合
先に「google xml sitemaps」プラグインを入れていると
「google xml sitemaps」と「PS Auto Sitemap」
が同じURL「sitemap」となって
競合してしまいサイトマップが表示されません
パーマリンク設定 URLスラッグ「sitemap」を
「pssitemap」に変更すれば表示されます。
「google xml sitemaps」を入れていなければ
パーマリンク設定のURLスラッグ「sitemap」でも表示されます。
XMLサイトマップ プラグインはこちら
カスタム HTML で入力
「PS Auto Sitemap」設定
ご利用方法下にあるコードを貼り付けますが
Cocoonの本文にテキストをそのまま貼り付けても
サイトマップは表示されません。
ブロックを追加→ブロックの検索から
カスタムHTMLを選択して貼り付けをしてください。
ps auto sitemap 記事 IDを入力しているか
プラグインをインストールして「PS Auto Sitemap」の
「有効化」だけで、記事IDは入力されていますか？
プラグインを「有効化」しただけでは
サイトマップは表示されません
もう一度「PS Auto Sitemap」設定から
「サイトマップの記事ID」を記載しているか確認してください。
ps auto sitemapスタイル 一覧
ps auto sitemap が無事に表示された方はおめでとうございます
ps auto sitemapでは
サイトマップに表示されるスタイルを簡単に
変更することができます
全部で14種類あり
簡単にカスタマイズができますので
サイトにあった、お好みのスタイルに変更してみてください
デフォルトでは「スタイルなし」が選択されています
WordPress管理画面「設定」から
「PS Auto Sitemap」をクリック
PS Auto Sitemap設定画面
スタイルの変更 プルダウンメニューをクリックすると
全部で14種類のスタイルが表示されます
変更を保存するとすぐに表示されます
PS Auto Sitemap スタイルの一覧です参考にしていただけたら幸いです
スタイルなし
シンプル
シンプル2
チェックリスト
蛍光ペン
ドキュメントツリー
付箋
音符
矢印
ビジネス
索引
アーバン
アンダースコア
キューブ
PS Auto Sitemap 代わり cocoon sitemap
使用しているテーマCocoonには標準で
サイトマップ作成機能が備わっているので
PS Auto Sitemap を使わなくても
固定ページに直接ショートコード
[sitemap]を入力するとサイトマップを簡単に作成することもできます
表示させたい固定ページに直接コード
[sitemap]と入力して公開すると
すぐに表示されます
Cocoonサイトマップの場合は
すべての投稿記事が一覧で表示されます
カテゴリー別に表示させたい場合は
PS Auto Sitemapを使用をおすすめします
フリー 画像 登録不要 サイト
フリー 画像 登録不要の おすすめ サイト5選です
- いらすとや：よく見たことあるイラストがたくさん
- ぱくたそ：よく見たことある人がたくさん
- Pixabay（ピクサベイ）：アートな写真がたくさん
- pexels（ペクセル）：アートな写真がたくさん
- O-DAN（オーダン）：世界中の写真素材を検索
- ロゴメーカー：無料でオリジナルロゴが作成できる
いらすとや
いらすとや は、みふねたかし氏が作ったイラストです。
このイラスト見たことある・・・
と思うものがたくさんあると思います
それだけ利用している方が多いのが「いらすとや」です
サイトで配布している素材は規約の範囲内であれば
- 個人
- 法人
- 商用
- 非商用
問わず無料で利用できます
行政のパンフレットにも登場します。
プロフィール画像も使わせていただいてます。
ぱくたそ
ホームページを見ていると
この写真の人
他のサイトでも見たことある・・・・
なんてことがあると思います
その人の写真は ぱくたそ にあります。
よく使わせていただいてます
ぱくたそ は 見たことのある人気 写真（画像）を
無料でダウンロードできるフリー素材です
ぱくたそ は商用可能も可能です。
いろいろな、写真を見ていると楽しいです。
風景などの写真も高解像度なので美しいく
日本の写真が沢山あります。
Pixtabay
アートな感じの写真が欲しい方は
Pixabayはどうでしょうか？
Pixabayは著作権フリーな画像や映像があり
すべてのコンテンツが商用利用可能です
かなりアートな感じです
ホームページに使えるので助かります
センスがないので勉強にもなります
pexels
こちらもアート作品がたくさんあります
Pexelsのライセンスはとてもシンプルです。
紹介しますと・・・
- Pexelsのすべての写真や動画は無料で利用できます
- 出典表示は不要です。
カメラマンの表示やPexelsの出典表示は不要ですが
そうした表示はいつでも感謝されます。 - 写真や動画に変更を加えることができます。
創造性を発揮して編集してください。
ホームページを作るうえで欠かせない
センスのいい画像はとてもありがたいです。
O-DAN
オーダンとは
世界中の40サイトから無料の写真素材を検索することができます
オーダンでは
「Pixabay」 「pexels」の画像も表示されます
キーワードで検索して
イメージに合うものを探し出せたらとてもうれしいですね
ロゴメーカー
ロゴメーカーは
簡単な操作で自分のロゴが作成できます
インストールすることもなく
ある程度のひな形が用意されているので
名前を入力してアイコンを選択すれば
オリジナルのロゴが簡単に作れます
サイトアイコンはロゴメーカーで作りました。
ブログ立ち上げ時にオリジナルロゴを作成しておくと
サイトのシンボルマークとしての役割
グッズ作成時につかえます
画像 編集 ソフト フリー おすすめ
画像 編集 ソフト が フリー
おすすめです
ここに紹介したソフトを使うと
ホームページでの説明、画像加工などができるので
思い通りのホームページ作りに
近づきます
- Screenpresso
- gimp
を紹介します
screenpresso スクリーン プレッソ
パソコン画像のキャプチャーソフトは
Screenpresso（スクリーンプレッソ）をおススメします
有料アップグレードすればさらにいろいろ使えると思いますが
無料でも十分使えるので無料のScreenpressoをおすすめします
Screenpressoでは
- 画面のキャプチャーができる
パソコンの画面をキャプチャー（画像に）できる
画像だけでなく録画もできる - キャプチャーしたものへ簡単に装飾できる
作成したキャプチャーに文字、矢印などを
簡単に追加して新たなキャプチャーを作成することができす
めちゃくちゃお世話になっています
キャプチャーソフトがあると
Windows付属のプリントスクリーンを使うより
簡単に多彩なキャプチャーが作れます
gimp 画像編集ソフト
つい先日知って勉強中のソフトgimpです。
アドビのPhotoshopが画像編集ソフトとしては有名ですが
Photoshopは、お値段もなかなかです。
画像編集それほどしないかもしれない人にしてはハードルが
とても高いのであきらめていましたが
調べたら、Photoshopに負けない機能が無料で使える
画像編集ソフトがあることを知りダウンロードしてみました
扱いきれていません
使ってみたら、すごい機能がたくさんあります
gimpを使いこなせて画像編集が思いのままできたら
ブログ、ホームページにオリジナル要素が加わるので楽しそうです。
gimpとは
GIMP（GNU Image Manipulation Program）と言い
- レイヤー機能
- パス
- マスク
- グラデーション
- 色調整（正規化、ホワイトバランス、コントラスト伸長など）
- フィルタ（ぼかし、強調、変形、ノイズ、合成、マップ、下塗りなど）
などの豊富な機能が無料で使える高機能な画像編集ソフトです。
知らなかった
もっと早く知りたかった・・・
gimp 無料 ダウンロード
gimpのサイトから直接ダウンロードを選択
ダウンロードが完了すると
インストール画面になりますが
日本語選択表示がないので「English」を選択してください。
インストール完了後
表示は日本語になっていましたので安心して使えます
gimp の 使い方
Photoshopも使ったことなかったので
どう使えばいいのかわからなかったのですが
YouTubeでわかりやすく説明されていたので
参考にしながら勉強しています
同じものが作れると感動します。
若干のクセはありますが使い慣れたらすごいことができそうです
驚きの連続です
ちょっと作ってみました
プロフィールのアイキャッチもgimpで作成しました
アイキャッチはこちら
gimp 拡大 縮小
初期設定ではマウスホイールを使ってのビューを
拡大、縮小できないので設定していきます
Windows版の設定です
gimp→編集→設定をクリック
gimpの設定から「入力コントローラー」を選択
アクティブなコントローラーから「Main Mouse Wheel」
をクリック→「選択したコントローラーの設定」を開きます
上にスクロールをクリック「イベントの編集」をクリック
上スクロールにズームイン(view-zoom-in)を検索して選択→ＯＫ
同様に下にスクロールをクリック「イベントの編集」をクリック
下スクロールにズームアウト(view-zoom-out)を検索して選択→ＯＫ
この設定がおススメです
人によって上下スクロールの感覚が
違うので感覚が合わなければ逆に設定をしてください
ホイール ドラッグ
キャンバスを移動する方法はいろいろあるのですが
おすすめが
- ホイールドラッグ
マウスホイールを押したままマウスを移動させるとキャンバスを自由に
移動することができます
- Spaceキー＋マウス移動
パスを使った切り抜きなどする時はこちらがおススメ
の2種類です
使いやすい方を使ってください
gimp 画像 サイズ 変更
まだ、ブログを始めたばかりで「いらすとや」
にあったイラストを使ってアイキャッチ画像を作成していたとき
ある日突然・・・Googleのサーチコンソールからメールが送られてきました
送られてくるメールには
「推奨サイズより大きい画像を指定してください」という
AMPエラー警告がメールで送られてきました。
AMPとは、モバイル用のページで画像が指定幅以上ないと警告されます
画像の幅が 1200 ピクセル以上必要で
1200ピクセル以下だと警告されます
警告が送られてきた場合は、gimpを使って
1200ピクセル以上のサイズに変換して画像を置き換えれば問題解決できます。
サイズに注意してください
gimpで合成して指定サイズ以上にすると
エラーが消えます
プロフィールアイキャッチはこちら
gimpでファイル保存する画像拡張子の種類がたくさんありますが
- png
- jpeg
- tiff
の3つが分かればとりあえず、大丈夫です
pngとjpegの違いは 自然のものか 人工のものか
- jpeg 写真などの自然なもの
- png イラストなどの人工のもの
で保存すればOKです
ｗｅｂの画像は「容量が軽く」「みためがキレイ」なもの
が求められています
中身のデータを圧縮した時にデータがどれぐらい
影響を受けるのかで使い分けをしましょう
tiffは、gimpで再加工する時に使います
tiffで出力しておけば
再加工時に画像品質を保ったまま加工できます
ｗｅｂでは、データ容量の大きいtiffは扱えないので
ｗｅｂに掲載する時はjpegに変換します
まとめ
実際wordPressに入れているプラグインです。
- Contact form7
- wp multibyte patch
- Broken Link Checker
- Revision Control
- EWWW Image Optimizer
- Jetpack
- Child Theme Configurator
- Redirection
- wp fastest cache
たくさんありますが、入れておいて損はないです
WordPressに入れるプラグインは
なるべく最小限にして運用した方がいいです
厳選した9種類はおすすめです
９種類の他にも
サイトマップ設定でサイト管理しやすくなる
バックアップ設定でブログが守られます
などありますので
どんなプラグインを導入・設定したらいいのか
迷っている方の参考にしていただけたら幸いです
最後まで読んでいただきありがとうございました
コメント