WordPress初心者がcocoonと共に導入するべき 厳選 プラグイン9選

Wordpress
OLYMPUS DIGITAL CAMERA

導入しているWordPressおすすめプラグインです。

紹介するプラグインは

導入すると便利なプラグインです

プラグインには、似てる機能、種類さまざまありますが

実際に導入している9種類のプラグインです

  • Contact form7(問い合わせ作成)
  • wp multibyte patch(不具合予防)
  • Broken Link Checker(リンクエラー修正)
  • Revision Control(パフォーマンス最適化)
  • EWWW Image Optimizer(画像圧縮)
  • Jetpack(ツイッター連携)
  • Child Theme Configurator(子テーマ作成)
  • Redirection(エラーページを自動転送リダイレクト)
  • wp fastest cache (wordpress 高速化)

参考にしていただけたら幸いです

スポンサーリンク
  1. 結論:厳選 wordPressおすすめプラグイン9選
  2. contact form 7 必須
    1. wordpress 固定 ページ 追加
      1. プラグインインストール
      2. contact form 7 ショート コード
      3. wordpress 固定 ページ 表示
      4. 固定 ページ 確認
    2. フォーム 修正
      1. 電話番号 フォーム
      2. ラベル 作成
      3. contact form 7 メール設定
      4. contact form 7 自動 返信
      5. contact form 7 確認 メール
  3. wp multibyte patch とは
  4. broken link checker
  5. revision control
  6. 画像 圧縮 プラグ イン
    1. ewww image optimizer 設定
    2. ewww image optimizer 設定 基本タブ
    3. ewww image optimizer 設定 変換タブ
  7. jetpack Twitter 連携
    1. プラグインのインストール
    2. jetpack 設定
    3. Jetpack 共有
    4. WordPress.com 日本語 化
    5. Jetpack 共有 ツイッター
    6. twitter 投稿 テスト
  8. Child Theme Configurator 
    1. Child Theme Configurator の使い方
    2. 子テーマ作成プラグインをインストール
    3. 子テーマ 作成
    4. 子テーマ 作成方法まとめ
    5. phpファイルの作り方
  9. redirection プラグイン 使い方
    1. Redirection有効化
    2. Redirection設定
    3. モバイル対応記事
  10. wordpress 高速化 キャッシュプラグイン
    1. google ページ スピード イン サイト
    2. wp fastest cache
    3. wp fastest cache インストール 有効化
    4. wp fastest cache 設定
      1. キャッシュ
      2. 先読み
      3. ログインユーザー
      4. モバイル 
      5. 新しい投稿
      6. updatepost
      7. Gzip圧縮
      8. ブラウザキャッシュ
    5. キャッシュの削除
    6. Cocoon サイト の 表示 速度 高速化
  11. ps auto sitemap
    1. サイトマップ とは
    2. xml サイト マップ
    3. html サイト マップ
  12. ps auto sitemap 使い方
    1. PS Auto Sitemap インストール
    2. PS Auto Sitemap コード コピー
    3. PS Auto Sitemap コード貼り付け
    4. PS Auto Sitemap 記事 ID 出力
    5. PS Auto Sitemap 記事 ID 入力
    6. PS Auto Sitemap 除外カテゴリー 除外記事
  13. PS Auto Sitemap 表示されない 対処法
    1. google xml sitemaps プラグイン
    2. カスタム HTML で入力
    3. ps auto sitemap 記事 IDを入力しているか
  14. ps auto sitemapスタイル 一覧
  15. PS Auto Sitemap 代わり cocoon sitemap 
  16. フリー 画像 登録不要 サイト
    1. いらすとや
    2. ぱくたそ
    3. Pixtabay
    4. pexels
    5. O-DAN
    6. ロゴメーカー
  17. 画像 編集 ソフト フリー おすすめ
    1. screenpresso スクリーン プレッソ
    2. gimp 画像編集ソフト
      1. gimpとは
      2. gimp 無料 ダウンロード
      3. gimp の 使い方
    3. gimp 拡大 縮小
      1. ホイール ドラッグ
      2. gimp 画像 サイズ 変更
  18. まとめ

結論:厳選 wordPressおすすめプラグイン9選

実際wordPressに入れているプラグインです

  1. Contact form7(問い合わせ作成)
  2. wp multibyte patch(不具合予防)
  3. Broken Link Checker(リンクエラー修正)
  4. Revision Control(パフォーマンス最適化)
  5. EWWW Image Optimizer(画像圧縮)
  6. Jetpack(ツイッター連携)
  7. Child Theme Configurator(子テーマ作成)
  8. Redirection(エラーページを自動転送リダイレクト)
  9. wp fastest cache (wordpress 高速化)

9種類の他にも

  • サイト評価が上がる
    サイトマップ自動作成プラグイン
  • バックアップ設定が簡単にできる
    バックアップファイル作成プラグイン 

などもあるのでおすすめします

関連記事

参考にしていただけたら幸いです

contact form 7 必須

Contact form7はWordPressに問い合わせページを

作ることができるプラグインです。

自分で問い合わせページを作成する場合には

プログラム言語、HTMLやCSSの知識が必要になります。

しかし、Contact form7を使えばHTMLやCSSの知識がなくても

簡単に設定できます

日本だけでなく、海外でも広く使われています。

Contact Form 7のメリットは、

  1. 導入や設定が簡単
  2. 自動返信メールの設定もできる
  3. 利用者が多いので、設定がわからない場合でも
    ネットで検索することができる

の3つです

Googleアドセンスはご存じですか?

Googleアドセンス審査には

Contact form7などで問い合わせフォームを作成しないと

Googleアドセンス審査に受かりにくいです

Googleアドセンス審査申し込みはこちら

これから、ブログ運営をしていくと考えている方には

Contact form7は必須です

wordpress 固定 ページ 追加

WordPressには、問い合わせフォームがないので

プラグインを使って作成していきます。

お問い合わせフォームは、カテゴリーに属していないので

固定ページに設置していきます。

まず固定ページを作成します。

固定ページ→新規追加をクリックします。

タイトルを お問い合わせ と入力して下書きにします。

これで固定ページに お問い合わせ ページができました。

まだこの段階ではホームページ上に表示されていません

プラグインインストール

WordPressには、問い合わせ機能が存在していないので

プラグインを使って機能を追加していきます。

プラグイン→新規追加→プラグインの検索にcontactform7と入力します。

富士山のマークです。

今すぐインストールをクリックして→有効化をクリックします。

有効化をするとwordPress管理画面左側のメニューに

 お問い合わせ が追加されています。

メニュー お問い合わせ をクリックします。

コンタクトフォーム1をクリックします。

タイトルのコンタクトフォーム1を お問い合わせ に変更します。

お問い合わせに変更後 保存をクリックします。

 



contact form 7 ショート コード

緑枠のショートコードをクリックするとコードが選択されるので

右クリック→コピーでショートコードのコピーをします。

下書きにした固定ページに移動してショートコードを貼り付けます。

貼り付けたら公開をクリックします。

wordpress 固定 ページ 表示

wordPress管理画面に戻り

外観→メニューをクリックします。

メニュー項目を追加からすべて表示タブ→

お問い合わせ にチェックを入れてメニューに追加をクリック

メニュ構造にお問い合わせがあるのを確認をして   

メニューを保存をクリックします

固定 ページ 確認

サイト トップページ上部にある固定ページに

お問い合わせ が

表示されているのでクリックします。

クリックすると

お問い合わせフォームが表示されます

フォーム 修正

表示された お問い合わせ の中身を修正していきます。

デフォルトでは、フォームに 題名 が入っています。

題名 はいらなので消去していきます。

wordPress管理画面→お問い合わせ→お問い合わせをクリックします。

フォームの赤枠で囲った 題名 部分を消します。

電話番号 フォーム

題名 を消去したので空白ができました。

ここに 電話番号 を入れていきます。

テンプレート 青枠の電話番号では

全角入力するとエラーが出てきてしまうので

どの文字でも使える赤枠 テキストを使って作ります。

テキストをクリックします。

電話番号は任意にしたいので必須項目にチェックは入れません。

項目タイプ名前 に tel と入力します。

項目タイプ デフォルト値は

固定ページ お問い合わせ をクリックした時に

入力されている値なので空白にします。

「タグを挿入」をクリックします。

メールアドレスとメッセージ本文の間に

[text tel]

フォームが追加されます。

画像に alt 属性が指定されていません。ファイル名: 2020-10-29_14h16_39-1.png

このままだとフォームだけなのでラベルを作っていきます。

 

ラベル 作成

ラベルは、メールアドレスに似せて修正していきます。

先ほど作った[text tel]

を<label></label>で挟みます。

コード

<label> 電話番号  [text tel] </label>

これでラベルが完成しました。

保存をクリックします。

contact form 7 メール設定

続いてメールの設定をしていきます。

メッセージ本文以外はデフォルトのままで問題ありません。

送信先を変えたい場合には送信先を変更しておきます。

メッセージ本文はメールで送られてくる内容になります。

メッセージ本文を変更していきます。

差出人:[your-name]など項目はフォームと連動しています。

先ほどフォームで消した題名:[your-subject]が

メッセージ本文に入っているので消します。

フォームで作成した電話番号を追加していきます。

電話番号:[tel] と入力します。

保存をクリックします。

contact form 7 自動 返信

メッセージ本文 下にあるメール(2)に入力すると

問い合わせをした相手に

送信完了メールを自動 返信することができます。

メッセージには、あらかじめ相手に送りたいメッセージを

デフォルト値として設定しておけば

設定した内容で送信されます。

設定完了後 保存をクリックします。

contact form 7 確認 メール

設定完了後、設定が合っているか

実際送信してみてテストしてみてください。

設定が思っていたものと違うこともあります

確認メールを送り必ずチェックしましょう。

 



wp multibyte patch とは

wp multibyte patch(ダブリュピー マルチバイトパッチ)とは

もともとWordPressは英語で作られたシステムです

英語のアルファベットは

シングルバイト文字(半角文字  aの幅が1バイト で1バイト文字)になります。

日本語のひらがなや漢字等はシングルバイト文字ではなく

マルチバイト文字(1文字に2バイト使う文字)になります

シングルバイト文字のところにマルチバイト文字が入力されると

ファイル名の変換バグが起きたり、文字化けしたり文字数が正しく拾えくなるなど

不具合が生じる可能性があります。

この不具合を防いでくれるプラグインがWP Multibyte Patchです。

WordPress5.0以降からWP Multibyte Patchプラグインが

標準搭載されなくなりました。

過去に標準搭載していたもなので日本語環境で正しく作動させるために

入れておけば間違いないので有効化しておきましょう。

wp multibyte patch 設定

wordPress管理画面→プラグイン→新規追加→

プラグインの検索にWP Multibyte Patchと入力します。

表示されたら今すぐインストールをクリックします。

インストールが完了したら有効化をクリックします。

WP Multibyte Patchを有効化をすれば設定完了です。

Broken Link Checkerは

リンクの記載ミス

サイトのリンク切れをチェックをしたり

お知らせをしてくれます

ブログを作成していくと

リンク切れを常に監視していくのは不可能です。

リンク切れがあると、読者満足度が高くならず

ガッカリさせてしまいます

同時にSEOも好ましくありません。

ブログの記事数が増えてくれば

リンクも増えてくるので

必須のプラグインです

このプラグインを導入することでリンク切れを

一括チェックをしてくれるので

監視がとても楽になります。

  1. リンク切れのチェック
  2. メールでリンク切れを通知してくれる機能
  3. リンクエラーに自動で装飾(打ち消し線など)を適用したり
  4. 検索エンジンがリンクエラーを認識しないようnofollowを付与したり
  5. サーバーの負担の制限もしてくれます

5つの機能があるので入れておきましょう。

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などの連携ができます。

ツイッターのみ連携させていきます。

投稿を共有したいメディアが出てくるのでツイッターを選択します。

ツイッターのアカウント設定画面が出てくるので

連携させるアカウントとパスワードを入力します。

1つしかない場合は自動で入力されています。

設定が完了するとツイッターアイコン下に

登録したアカウントが表示されます。

すべての管理者、編集者、作成者が利用できる

接続にチェックを入れます。

これで設定が完了しました。

twitter 投稿 テスト

JetpackがインストールされるとwordPress投稿画面の

右側にJetpackの緑マークが入っています。

jackpackの緑のマークをクリックすると

連携させたメディアが表示されています。

もし、jackpack緑のマークを押しても

ツイッター表示がされていない場合は、

連携がされていないのでもう一度

Jetpackの設定から→ソーシャルメディアアカウントに

接続するをクリックして

ツイッターを選択し直してみてください

 

Child Theme Configurator 

Cocoonでは、あらかじめ子テーマが用意されていますが

wordPressのテーマに

子テーマが用意されていないものもあります

子テーマが用意されていない場合は

自分自身で子テーマ設定をしなければいけません

親テーマに直接カスタマイズしてもいいんですが

テーマ更新があると

すべて上書きされてカスタム内容は消えてしまいます。

知識はないけど、子テーマを作っておきたい

知識がなくて、子テーマの作り方がわからない

などで、子テーマづくりをあきらめていた方は

プラグイン「Child Theme Configurator」を導入すると

子テーマが簡単に作れます

Child Theme Configurator の使い方

子テーマ作成に最低限必要なファイルは

function.php

style.css

の2つが必要です

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
   をクリックして、子テーマを作成します。

子テーマ 作成方法まとめ

  1. CREATE a new Child Theme」を選択
  2. 子テーマを作成したいテーマを選択
  3. ④ ⑤ ⑥ ⑦は変更なし
  4. ⑧チェックを入れる
  5. 「Create New Child Theme」をクリック

これで、簡単に子テーマ

function.php

style.css

を作成できます

phpファイルの作り方

Child Theme Configurator

function.php と style.css の2つが

簡単に追加できました

WordPressがわかってきて

header.phpfooter.php

カスタマイズが必要になった時でも

Child Theme Configurator を使えば簡単に

必要なphpファイルを追加できます

Child Theme Configurator のタブから

「files」を選択します。

「files」タブか必要なphpファイル

header.php footer.phpの2か所にチェックを入れます

Childテーマが合っているか確認して

Copy Selected to Child Theme」をクリックすると設定は完了です。

ダッシュボード「外観」→「テーマ」から

作成した子テーマを確認し有効化してください

 



redirection プラグイン 使い方

ブログ記事をたくさん書いていくと、記事の書き直しや

記事の統廃合をすることになります

記事の統廃合をした結果

Googleに登録されたページが消えると

「404 NOT FOUND」表示になります

サーチコンソールを使うと

簡単に 「404 NOT FOUND」 表示になっているか確認できます

サーチコンソールの使い方・登録・確認方法はこちら

検索された記事が「404 NOT FOUND」では

読者も、著者もお互いに、もったいないです

読者満足度を高めるためにも

修正したページへのリンク修正

「301リダイレクト」設定をします

プラグインを使うと簡単にリダイレクト設定ができます

Redirection有効化

Redirection をインストールします

Redirectionは有効化しただけでは転送してくれません

wordPressメニューから「プラグイン」→「新規追加」

右上の検索窓に「Redirection」と入力します。

プラグインが表示されたら「今すぐインストール」→「有効化」をクリックします。

有効化が完了したら

ダッシュボード左側から「ツール」→「Redirection」をクリック

初期画面が出てくるので「セットアップ開始」をクリックします。

基本セットアップにはチェックを入れなくてOK

セットアップを続行」をクリックします。

セットアップ完了」をクリックします。

完了」をクリックします

Redirection設定

ダッシュボード左側から「ツール」→「Redirection」をクリック

初めて開くと「オプションタブ」になっているので

転送ルールタブ」をクリックします。

新しい転送ルールを設定します

ソースURLからターゲットURLへ自動転送されます

  • ソースURL
    検索表示された「404 NOT FOUND」
    ページを入力します
    相対URLと書いてありますが検索表示されたURLでも大丈夫です
  • ターゲットURL
    修正したページ(転送先)へのURLを入力します。

転送ルール追加をクリックすると設定は完了します。

記事の統廃合をしたら

リンク先修正できる Redirection設定 をしておきましょう

モバイル対応記事

Cocoonでは自動でモバイル対応記事を作成してくれます

記事修正などした場合

PC画面では301リダイレクトされますが

モバイル対応記事では

リダイレクトされず「404」が表示される場合があります

サーチコンソールにログインして

左側にあるインデックスカバレッジ見つかりませんでした(404)をクリック

404表示されているアドレスが表示されているので

Redirection設定 をしていきます

ドメイン○○.com/?p=○○&amp=1

で修正すればモバイル対応記事もリダイレクトされます。

wordpress 高速化 キャッシュプラグイン

やっとの思いで、立ち上げたサイトが検索上位にいくためには

Googleのサイト評価基準を勉強しないといけません

Googleの評価基準のひとつに

サイトページスピードがあります

サイトページスピードとは

アクセスしたサイトの表示スピード・レスポンスを数値で表します

サーチコンソールを設定していれば

簡単に見ることが出来ます

google ページ スピード イン サイト

Googleサーチコンソールを設定しておけば

簡単にサイト表示速度を調べることができます

Googleサーチコンソールを設定していますか?

Googleサーチコンソールの登録・設定はこちら

Googleサーチコンソールに

ログインして左にある

エクスペリエンス→ウエブに関する主な指標をクリック

クリックすると pagespeedInsightsを試す が表示されるので

pagespeedInsightsを試すクリックします

クリックすると分析が始まり

しばらく待つと結果が出てきます

  • 0~49 
  • 50~89
  • 90~100

の三段階で評価されます目指すのは90~100です

もし0~49であれば

wp fastest cache などのwordpress高速化プラグイン

導入して表示スピードを改善させましょう

ただ・・・表示速度も大切ですが記事内容の方がもっと大事です

wp fastest cache

wp fastest cacheはサイト読み込み時間を短縮させるプラグインです

サイト読み込み時間を減らすポイントは

キャッシュと呼ばれる

記事内容を保存したものを表示させることです

キャッシュを表示させることで

サイト読み込みまでの時間を稼ぎ

サイト表示速度を改善させるプラグインです

日本語にも対応しているで安心して使用できます

プラグインとWordPressテーマの相性もあるので

必ずバックアップをしてから行いましょう

おすすめのバックアップ プラグインはこちら

本サイトで使用しているテーマCocoonにも

キャッシュ設定があります

wpfastestcacheを入れた方が

表示速度が速くなりました

高機能wordpress無料テーマCocoonのインストール方法はこちら

WP fastest cacheを有効化しただけでは

設定完了しないので設定をしていきます

wp fastest cache インストール 有効化

WP fastest cacheをインストールするために

WordPress管理画面のダッシュボードから

プラグイン→新規追加をクリック

プラグイン検索に wp fastest cache と入力します

表示されたら今すぐインストール、有効化をクリックします

インストールしただけでは機能しないので設定をしていきます

有効化をするとダッシュボード左下に

wpfastestcacheのアイコンが出てくるのでクリックします

クリックすると設定画面が出てきます

はじめて立ち上げると

英語表記になっているので日本語表記に変更します

下にある Language日本語に変更して

Submitをクリックします

 



wp fastest cache 設定

設定チェックするところは8カ所です

  • キャッシュ
  • 先読み
  • ログインユーザー
  • モバイル
  • 新規投稿
  • update post
  • Gzip圧縮
  • ブラウザ キャッシュ

キャッシュ

有効化にチェックを入れないとキャッシュされないので

チェックを入れます

先読み

先読みさせるページにチェックを入れて選択します

先読みさせるページはよく使う

  • ホームページ
  • 投稿
  • カテゴリー
  • 固定ページ
  • タグ

にチェックを入れます

ログインユーザー

ログインユーザー = サイト管理者なので

サイト管理者にキャッシュが表示されると記事修正

カスタマイズ内容の確認がしづらいので

キャッシュされないようにチェックを入れます

モバイル 

モバイルユーザーにデスクトップ版のキャッシュを表示させると

エラーが出ることがあるのでチェックを入れて

表示させないようにします

Cocoonの場合はパソコンとモバイルが

完全レスポンシブなので

基本的にはキャッシュ設定は不要です

新しい投稿

新しい投稿にチェックを入れることで

新しい記事を投稿するたびに古いキャッシュと

新しいキャッシュを入れ替えてくれるのでチェックを入れます

clear All Cache を選択しておけば大丈夫です

updatepost

記事更新したら、キャッシュを削除する機能です

clear cache of post/pageを選択すれば大丈夫

Gzip圧縮

HTML CSS などのファイルをサーバー上で圧縮して

転送量を減らして高速化する機能なのでチェックを入れます

ブラウザキャッシュ

サーバー上でなくブラウザ上でキャッシュをしてくれる機能です

ブラウザキャッシュにチェックを入れます

設定が完了したら「変更を保存」をクリックします

 



キャッシュの削除

wp fastest cache の設定 が完了したので

新しい記事が投稿されると

自動でキャッシュ削除してくれるようになりましたが

キャッシュの削除タブから手動で

キャッシュ削除することもできます

キャッシュの削除タブからキャッシュの削除

clear All Cacheをクリックすると

キャッシュフォルダ内のキャッシュを削除できます

また、Timeout Rules横の Add New Ruleをクリックすると

キャッシュ自動削除設定画面が出てきます

設定した時間で自動キャッシュ削除もできます

また、WordPress管理画面の

ダッシュボード上にあるアイコンをクリックしても

キャッシュを手動で削除することもできます

Cocoon サイト の 表示 速度 高速化

Cocoonには標準でサイト高速化の項目があります

Cocoon設定→高速化をクリックして

すべてにチェックを入れておけば表示が早くなります

サイト高速化によって画面崩れがおきる場合もありますので

画面崩れがおきた場合はチェックを外してください

当サイトはロリポップのスタンダードプランを使っています

ロリポップ スタンダードプランは

サーバーのソフトウエアがApache系

なのでCocoon公式ページでも

wp fastest cacheはおススメされています

Cocoon公式ページ詳しくはこちら

ps auto sitemap

PS Auto Sitemapとは

簡単にHTMLサイトマップを作製できるプラグインです

サイトマップを作ると

Googleアドセンスに合格しやすくなるとも言われています

wordPressには投稿ページと固定ページがあります

投稿ページと固定ページの違いは

  • 投稿ページ:読者に有益な新しい記事を増やしていく場所
  • 固定ページ:サイトに必要なページ、記事を増やさないコンテンツ

サイトマップは記事を増やさないコンテンツなので

固定ページにピッタリです

手動でサイトマップを作ると

新記事・下書きにした時など

記事更新と同時にサイトマップの更新作業が必要になります

PS Auto Sitemapを1度設定してしまえば

新しく記事を作成、記事の下書化などをしても

サイトマップ更新作業が自動で作成・修正されるので

空いた時間を新しい記事の作成にまわすことができます

サイトマップ とは

サイトマップとは、サイト全体のページ構成を

地図のように一覧で記載しているページのことです

サイトマップには

  • 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ステップ」でサイトマップが作成できます

  1. PS Auto Sitemap 設定下にあるコードをコピーして
    投稿記事に貼り付け1回公開
  2. 公開したページに表示されたIDをメモをする
  3. 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固定ページに貼り付けます

画像に alt 属性が指定されていません。ファイル名: 2021-03-31_22h15_43.png

ブロックエディターやCocoonを利用している方で

そのままコードを貼り付けをしても

サイトマップは表示されません

必ずカスタムHTMLを選択してコードを貼り付けてください。

ブロックの追加からすべて表示ウイジェットの

カスタムHTMLを選択してからコードを貼り付けます。

画像に alt 属性が指定されていません。ファイル名: 2020-11-09_22h16_51-1.png

右側のパーマリンク設定から

URLスラッグに「pssitemap」と入力します。

URLスラッグを入力したら「公開」をクリックします。

 

PS Auto Sitemap 記事 ID 出力

公開が完了すると

ブラウザー上にあるアドレスバーに記事IDが出力されます

表示されたアドレスの

『POST=〇〇〇』という部分

○○〇には数字が表示されていますので

数字を控えておいてください

今回は166だったので番号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」を設定しても

サイトマップが表示されない場合があります。

表示されないときは3点を確認してください。

  1. 「google xml sitemaps」を先に入れているか
  2. カスタムHTMLで貼り付けているか
  3. サイトマップ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サイトマップ プラグインはこちら

google xml sitemapsプラグイン設定はこちら

カスタム HTML で入力

画像に alt 属性が指定されていません。ファイル名: 2020-11-09_22h16_51-1.png

「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サイトマップについて 公式ページはこちら

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で作成しました

アイキャッチはこちら

Created with GIMP

gimp 拡大 縮小

初期設定ではマウスホイールを使ってのビューを

拡大、縮小できないので設定していきます

Windows版の設定です

gimp→編集→設定をクリック

gimpの設定から「入力コントローラー」を選択

アクティブなコントローラーから「Main Mouse Wheel」

をクリック→「選択したコントローラーの設定」を開きます

上にスクロールをクリック「イベントの編集」をクリック

上スクロールにズームイン(view-zoom-in)を検索して選択→OK

同様に下にスクロールをクリック「イベントの編集」をクリック

下スクロールにズームアウト(view-zoom-out)を検索して選択→OK

この設定がおススメです

人によって上下スクロールの感覚が

違うので感覚が合わなければ逆に設定をしてください

ホイール ドラッグ

キャンバスを移動する方法はいろいろあるのですが

おすすめが

  • ホイールドラッグ
     マウスホイールを押したままマウスを移動させるとキャンバスを自由に
     移動することができます
  • Spaceキー+マウス移動
    パスを使った切り抜きなどする時はこちらがおススメ

の2種類です

使いやすい方を使ってください

gimp 画像 サイズ 変更

マスコットのウイルバー

まだ、ブログを始めたばかりで「いらすとや」

にあったイラストを使ってアイキャッチ画像を作成していたとき

ある日突然・・・Googleのサーチコンソールからメールが送られてきました

送られてくるメールには

「推奨サイズより大きい画像を指定してください」という

AMPエラー警告がメールで送られてきました。

AMPとは、モバイル用のページで画像が指定幅以上ないと警告されます

画像の幅が 1200 ピクセル以上必要で

1200ピクセル以下だと警告されます

警告が送られてきた場合は、gimpを使って

1200ピクセル以上のサイズに変換して画像を置き換えれば問題解決できます。

サイズに注意してください

gimpで合成して指定サイズ以上にすると

エラーが消えます

プロフィールアイキャッチはこちら

gimpでファイル保存する画像拡張子の種類がたくさんありますが

  • png
  • jpeg
  • tiff

の3つが分かればとりあえず、大丈夫です

pngとjpegの違いは 自然のものか 人工のものか

  • jpeg 写真などの自然なもの
  • png イラストなどの人工のもの

で保存すればOKです

webの画像は「容量が軽く」「みためがキレイ」なもの

が求められています

中身のデータを圧縮した時にデータがどれぐらい

影響を受けるのかで使い分けをしましょう

tiffは、gimpで再加工する時に使います

tiffで出力しておけば

再加工時に画像品質を保ったまま加工できます

webでは、データ容量の大きいtiffは扱えないので

webに掲載する時は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種類はおすすめです

9種類の他にも

サイトマップ設定でサイト管理しやすくなる

サイト構成がよくわかる サイトマップ設定はこちら

バックアップ設定でブログが守られます 

などありますので

どんなプラグインを導入・設定したらいいのか

迷っている方の参考にしていただけたら幸いです

最後まで読んでいただきありがとうございました

Wordpress
スポンサーリンク
シェアする
hiroをフォローする
なやみっくす

コメント

タイトルとURLをコピーしました