WordPress研究会2019

2019年7月30日 比留間

WordPressの機能を拡張する

第5回

内容1. WordPressプラグイン

2. WordPressプラグインの探し方と導入

3. 「WordPressプラグイン おすすめ」で検索

4. WordPressプラグイン導入時の注意事項

5. さくらインターネット導入済プラグイン

6. 気になるプラグイン

7. プラグインの導入と有効化

8. プラグインの停止・削除

9. エクスポートとインポート

10. コンテンツを充実させる

2

1. WordPressプラグイン

3

• WordPressの機能を拡張する部品

プラグインの主な種類

記事執筆に便利なプラグイン

写真の表示に関するプラグイン カテゴリーの操作に便利なプラグイン

表を簡単に作成するプラグイン サイトのバックアップに便利なプラグイン

画像のスライダーを作成するプラグイン サイトのセキュリティを向上させるプラグイン

人気記事や関連記事を表示させるプラグイン サイトの表示を高速化させるプラグイン

SNSとの連携に便利なプラグイン サイトの見た目を変更するプラグイン

掲示板を実装するときに便利なプラグイン 管理画面を変更するプラグイン

アクセス解析に便利なプラグイン 読者とのやりとりに便利なプラグイン

目次を追加するプラグイン SEO対策（検索エンジン最適化）に有効なプラグイン

参照資料： https://gekkan-fukugyou.jp/wordpress-recommended-plugin/

2. WordPressプラグインの探し方と導入

4

• 実現したいことの具体化

• サービスプロバイダーの情報の活用

• インターネット情報の検索

• プラグインの机上の評価

• プラグインの試行

• プラグインの試行の評価

• 本番システムへの導入

3. 「WordPressプラグイン おすすめ」で検索（１）

5

• WordPressのおすすめプラグインは８つだけ。断言します

– https://manablog.org/wordpress-plugin/

• 【2018年版】WordPressのおすすめプラグイン10選

– http://hituji-affiliate.com/2017/03/12/plugin/

• 初心者にオススメ！とりあえずいれておけば安心なWordPressプラグイン10選

– https://ferret-plus.com/5938

• 【2018年版】インストール必須のおすすめWordPressプラグイン１9選

– https://hajipro.com/wordpress/wordpress-plugins

• wordpressで絶対入れるへきプラグインおすすめ5選とその使い方

– http://buildupp.net/wordpress/wordpress-plugin-recom5

3. 「WordPressプラグイン おすすめ」で検索（２）

6

• ＊WordPress初心者におすすめの超便利な機能別プラグイン60選

– https://gekkan-fukugyou.jp/wordpress-recommended-plugin/

• WordPressプラグインでおすすめ[2018年]：本当に役立つの

– https://vichiya.com/wppluginhelp/

• 【これは入れとけ】11個のおすすめWordPressプラグインを厳選したぞ

– https://affiligoto.com/wordpress-plugin/

• 【2018年】おすすめのWordPressプラグイン【無料、定番多め22個】

– https://uranaka-shobou.com/wordpress-plugins/

• ＊WordPressの優良プラグイン50選【ブログ運営を効率化できる】

– https://netaone.com/wp/wordpress-plugin-first/

＊おすすめ記事

＊おすすめ記事

4. WordPressプラグイン導入時の注意事項（１）

• WordPressプラグインをいきなり本番環境に導入せず、別に用意したテスト環境で試した上で本番環境に導入する。

• プラグインをインストールする前に、WordPressのデータベースを必ずバックアップする。サーバー環境によってはプラグインにエラーが発生する場合がある。十分にご注意する。

• WordPressのプラグインは、入れすぎると管理が難しくなり、セキュリティ面でもリスクが増える。

• おすすめプラグインでも、なるへくひとつひとつ慎重にインストールして、しっかり動作するか確認してから、次のプラグインをインストールするようにする。

• 「プラグイン名＋エラー」という検索方法をしても、ある程度のプラグインの評判やデメリットを知ることができるので、インストール前にチェックする。

• 慣れるほどにプラグインは少なくても足りると感じるはずなので、サイトに合ったものを厳選してインストールする。

7

4. WordPressプラグイン導入時の注意事項（２）

• WordPressの「テーマ」によっては、プラグインで入れなくても初期段階でいろいろなことができるようになっているテーマもある。プラグインを入れる前に「今使っているテーマに○○の機能はないか？」というのをチェックする。

• 10個～２０個以内くらいに抑えるのが理想である。

• もし「これはいい！」と思えるお気に入りのものに出会ったら、自分専用のプラグインリストとして保存する。

• WordPressプラグインをたくさんインストールするデメリット

– プログラムが重くなり、執筆も閲覧も遅くなる

– 組み合わせで相性の悪いプラグインもある

– セキュリティ上のリスクが増えて安全に使えなくなる

8

5. さくらインターネット導入済プラグイン（１）

プラグイン 機能

Akismet Anti-Spam ブログへの迷惑なスパムコメントを判別して自動削除する。

All In One WP Security& Firewall

WordPressのセキュリティ対策の設定を一元管理できる。

Autoptimize ウェブサイトを最適化し、CSS コードと JavaScript コードを連結し圧縮する。

Disable Google Fonts Google社が提供しているWeb Fontsを使用しない設定を適用する。WordPressをSSL化した際に生じる不具合(警告の表示)の回避や、サーバの応答速度の向上が期待できる。

ImageMagick Engine WordPressで自動生成されるサムネイル画像の画質を落とさずにファイルサイズを縮小する。

Protect Uploads アップロードディレクトリにインデックスファイルを作成する。WordPress経由でファイルをサーバへアップロードを行った際に作成されたディレクトリ(フォルダ)に対し、ファイル一覧の応答を抑制する。

9

5. さくらインターネット導入済プラグイン（２）

プラグイン 機能

Remove Query Strings From Static Resources

サーバからCSSやJavaScriptファイルを取得する際、付与されていたクエリストリングを削除する。 サーバの応答速度の向上が期待できる。

SAKURA RS WP SSL さくらのレンタルサーバ上のWordPressで、常時SSL化を簡単に行える。

TS Webfonts for SAKURA RS

さくらのレンタルサーバで株式会社モリサワ提供のWebフォント30書体が無料で利用できる。

WP Multibyte Patch WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行う。

10

6. 気になるプラグインプラグイン 機能

TinyMCE Advanced WordPressに標準搭載されているビジュアルエディタの機能を強化できる

Contact Form7 お問い合わせフォームの作成

Category Order and Taxonomy Terms Order

カテゴリーの順番を手動で変更できる

Password Protected サイト全体にパスワード認証を設定できる

Theme Authenticity Checker

WordPressのテーマに悪意のあるコードが含まれていないかを確認できる

Crazy Bone ログイン情報を記録してくれる

SiteGuard WP Plugin サイトを守るための機能が多くて高性能。メールでの通知があるので不審なログインも察知しやすい。

All-in-one WP Migration WordPressのインポートとエクスポートが簡単に実施できる。

Force Login ユーザー登録していないとサイトが閲覧できない

11

7. プラグインの導入と有効化

12

• 編集機能を拡張するプラグイン

• システム機能を拡張するプラグイン

• さくらインターネット導入済みプラグイン

7.1. 編集機能を拡張するプラグイン

13

• TinyMCE Advanced

• TinyMCE Templates

• Photo Gallery

• Smart Slider 3

• Contact Form7

• Category Order and Taxonomy Terms Order

7.2. システム機能を拡張するプラグイン

14

• Akismet Anti-Spam

– ブログへの迷惑なスパムコメントを判別して自動削除する。

– インターネット情報の活用 Akismetの設定方法！スパムコメントをブロックしよう！

– 取得したＡＰＩキーは保存する。ほかのWordPressにも同じキーを設定できる。

• SAKURA RS WP SSL

– 常時ＳＳＬ化を行う

– さくらサポート情報の活用 【WordPress】常時SSL化プラグインの使い方

• All-in-one WP migration

• Simple Scroll to Top Button

7.3.さくらインターネット導入済みプラグイン

15

• All In One WP Security& Firewall

• Autoptimize

• Disable Google Fonts

• ImageMagick Engine

• Protect Uploads

• Remove Query Strings From Static Resources

• TS Webfonts for SAKURA RS

• WP Multibyte Patch

8. プラグインの停止・削除

16

• Hello Dolly

– 有効化 ： 停止をクリック

– 停止 ： 削除をクリック

– 削除

9. エクスポートとインポート

17

• プラグイン「All-in-One WP Migration」を使用して行う

• エクスポート

– ホームページのすへての情報をPCにファイル形式でダウンロードする

– ダウンロードしたファイルはインポートで使用する

– ホームページはダウンロードした時点の情報で復元できる

• インポート

– ホームページをエクスポートしたファイルで復元をする

– WordPressとAll-in-One WP migrationを導入した環境で使用する

– エクスポートしたファイルを使用してインポートする

– ホームページはエクスポートしてファイルの情報で復元される

– ユーザーID／パスワードもすへて元の情報に戻る

9.1. エクスポートの手順

18

①エクスポートを選択

③Download~をクリック

➃保存をクリック②ファイルを選択

➄保存が完了したら閉じるをクリック

同一フォルダ上にインポートする場合はエクスポートではなくバックアップを選択

9.2. インポートの手順

19

①インポートを選択

②エクスポートファイルを指定

③開始をクリックすると

➃完了後、閉じるをクリック

9.2. インポート上の注意

20

• インポートするWordPressのフォルダを削除する

• 同一名称のフォルダにWordPress とAll-in-One WP Migrationを導入する

• フォルダを削除しないとエラーとなる

• 有料オプション導入済みではエラーにならない

• フォルダを削除しないのであればエクスポートではなく、バックアップを使用する

10. コンテンツを充実させる

21

• 「ページトップへ戻る」ボタンを設置する

• スライドショーを設定する

• フォトギャラリーを作成する

• 入力フォームをホームページに設置する

10.1. 「ページトップへ戻る」ボタン（１）

22

• プラグイン「Simple Scroll to Top Button」を使用する

• クリックするだけで、ページのトップに戻ることができる

• １ページのサイズが画面に収まらない時は実装すると便利である

• 投稿をフロントページにするときは必須である

• 「Twenty Seventeen」で複数のセクションを使用する時も必須である

• 設定-Scroll to Top からボタンの形状を指定する

10.1. 「ページトップへ戻る」ボタン（２）

23

①設定でScroll

to Topを選択

②ボタンの内容を指定

③ボタンの内容を指定

➃Live Preview

で形状を確認

➄設定を保存

10.2. スライドショー（１）

24

• 新しいスライドショーの作成は下記の手順で行う

– メニューより、Smart Sliderを選択する

– New Sliderをクリックし、新しいスライドショーを作成する

– スライドショーに使用する画像を取り込む

– スライドの切り替え方法について設定する

10.2. スライドショー（２）

25新規スライドショーを作成する

10.2. スライドショー（３）

26

ADD SLIDEをクリックし、画像を取り込む

10.2. スライドショー（４）

27

AUTOPLAYの設定を行う手動切替の設定を行う

10.2. スライドショー（５）

28

各スライドにアニメーションの設定を行う

10.3.フォトギャラリー（１）

29

• フォトギャラリーは次の手順で作成する

– Photo Galleryを選択し、写真を取り込む

– 固定ページまたは投稿でPhoto Galleryを選択し、該当のフォトギャラリーを取り込む

– フォトギャラリーの表示形式の設定を行う

10.3. フォトギャラリー（２）

30

フォトギャラリーを選択すると、フォトギャラリーと表示形式の設定画面が表示される。

10.3.フォトギャラリー（３）

31サムネール、スライドショーの表示例

10.4. 表（１）

32

• TinyMCE Advancedを導入すると編集画面にボタンが追加される

• 固定ページ、投稿の編集が容易となる

• 表形式の文書の作成も可能となる

• 編集画面のボタンのカスタマイズができる

TinyMCE Advancedを導入前 TinyMCE Advancedを導入後

10.4. 表（2）

33

表の挿入

セルの操作

行の操作

列の操作

10.5. 問い合わせ（１）

34

• Contact Form7を使用してフォームを作成する

• Contact Form7のルールに従い、フォームを作成する

• フォームを作成すると、ショートコードがアサインされる

• 固定ページにショートコードを貼り付ける

• 固定ページを表示すると、入力フォームが設置されている

10.5. 問い合わせ（２）

35

個別相談会