WordPress研究会2019
2019年7月30日 比留間
WordPressの機能を拡張する
第5回
内容
1. WordPressプラグイン 2. WordPressプラグインの探し方と導入 3. 「WordPressプラグイン おすすめ」で検索 4. WordPressプラグイン導入時の注意事項 5. さくらインターネット導入済プラグイン 6. 気になるプラグイン 7. プラグインの導入と有効化 8. プラグインの停止・削除 9. エクスポートとインポート 10. コンテンツを充実させる 21. WordPressプラグイン
• WordPressの機能を拡張する部品 プラグインの主な種類 記事執筆に便利なプラグイン 写真の表示に関するプラグイン カテゴリーの操作に便利なプラグイン 表を簡単に作成するプラグイン サイトのバックアップに便利なプラグイン 画像のスライダーを作成するプラグイン サイトのセキュリティを向上させるプラグイン 人気記事や関連記事を表示させるプラグイン サイトの表示を高速化させるプラグイン SNSとの連携に便利なプラグイン サイトの見た目を変更するプラグイン 掲示板を実装するときに便利なプラグイン 管理画面を変更するプラグイン アクセス解析に便利なプラグイン 読者とのやりとりに便利なプラグイン 目次を追加するプラグイン SEO対策(検索エンジン最適化)に有効なプラグイン2. WordPressプラグインの探し方と導入
4 • 実現したいことの具体化 • サービスプロバイダーの情報の活用 • インターネット情報の検索 • プラグインの机上の評価 • プラグインの試行 • プラグインの試行の評価 • 本番システムへの導入3. 「WordPressプラグイン おすすめ」で検索(1)
• WordPressのおすすめプラグインは8つだけ。断言します – 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プラグイン19選 – https://hajipro.com/wordpress/wordpress-plugins • wordpressで絶対入れるべきプラグインおすすめ5選とその使い方 – http://buildupp.net/wordpress/wordpress-plugin-recom53. 「WordPressプラグイン おすすめ」で検索(2)
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プラグイン導入時の注意事項(1)
• WordPressプラグインをいきなり本番環境に導入せず、別に用意したテスト環境で試した上で本 番環境に導入する。 • プラグインをインストールする前に、WordPressのデータベースを必ずバックアップする。サーバー環 境によってはプラグインにエラーが発生する場合がある。十分にご注意する。 • WordPressのプラグインは、入れすぎると管理が難しくなり、セキュリティ面でもリスクが増える。 • おすすめプラグインでも、なるべくひとつひとつ慎重にインストールして、しっかり動作するか確認してか ら、次のプラグインをインストールするようにする。 • 「プラグイン名+エラー」という検索方法をしても、ある程度のプラグインの評判やデメリットを知ること ができるので、インストール前にチェックする。 • 慣れるほどにプラグインは少なくても足りると感じるはずなので、サイトに合ったものを厳選してインス トールする。4. WordPressプラグイン導入時の注意事項(2)
• WordPressの「テーマ」によっては、プラグインで入れなくても初期段階でいろいろなことができるよう になっているテーマもある。プラグインを入れる前に「今使っているテーマに○○の機能はないか?」と いうのをチェックする。 • 10個~20個以内くらいに抑えるのが理想である。 • もし「これはいい!」と思えるお気に入りのものに出会ったら、自分専用のプラグインリストとして保存 する。 • WordPressプラグインをたくさんインストールするデメリット – プログラムが重くなり、執筆も閲覧も遅くなる – 組み合わせで相性の悪いプラグインもある – セキュリティ上のリスクが増えて安全に使えなくなる 85. さくらインターネット導入済プラグイン(1)
プラグイン 機能
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経由でファイルをサーバへアップロードを行った際に作成されたディレ クトリ(フォルダ)に対し、ファイル一覧の応答を抑制する。
5. さくらインターネット導入済プラグイン(2)
プラグイン 機能
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 のマルチバイト文字の取り扱いに関する不具合の累積的修正と 強化を行う。
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 ユーザー登録していないとサイトが閲覧できない
7. プラグインの導入と有効化
12
• 編集機能を拡張するプラグイン • システム機能を拡張するプラグイン • さくらインターネット導入済みプラグイン
7.1. 編集機能を拡張するプラグイン
• TinyMCE Advanced • TinyMCE Templates • Photo Gallery • Smart Slider 3 • Contact Form77.2. システム機能を拡張するプラグイン
14 • Akismet Anti-Spam – ブログへの迷惑なスパムコメントを判別して自動削除する。 – インターネット情報の活用 Akismetの設定方法!スパムコメントをブロックしよう! – 取得したAPIキーは保存する。ほかのWordPressにも同じキーを設定できる。 • SAKURA RS WP SSL – 常時SSL化を行う – さくらサポート情報の活用 【WordPress】常時SSL化プラグインの使い方 • All-in-one WP migration7.3.さくらインターネット導入済みプラグイン
• 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
8. プラグインの停止・削除
16 • Hello Dolly – 有効化 : 停止をクリック – 停止 : 削除をクリック – 削除9. エクスポートとインポート
• プラグイン「All-in-One WP Migration」を使用して行う • エクスポート – ホームページのすべての情報をPCにファイル形式でダウンロードする – ダウンロードしたファイルはインポートで使用する – ホームページはダウンロードした時点の情報で復元できる • インポート – ホームページをエクスポートしたファイルで復元をする – WordPressとAll-in-One WP migrationを導入した環境で使用する – エクスポートしたファイルを使用してインポートする – ホームページはエクスポートしてファイルの情報で復元される – ユーザーID/パスワードもすべて元の情報に戻る9.1. エクスポートの手順
18 ①エクスポートを選択 ③Download~をクリック ➃保存をクリック ②ファイルを選択 ➄保存が完了したら閉じるをクリック 同一フォルダ上にインポートする場合はエクスポートではなくバックアップを選択9.2. インポートの手順
①インポートを選択
②エクスポート
③開始をクリックすると
9.2. インポート上の注意
20
• インポートするWordPressのフォルダを削除する
• 同一名称のフォルダにWordPress とAll-in-One WP Migrationを導入する • フォルダを削除しないとエラーとなる
• 有料オプション導入済みではエラーにならない
10. コンテンツを充実させる
• 「ページトップへ戻る」ボタンを設置する • スライドショーを設定する
• フォトギャラリーを作成する
10.1. 「ページトップへ戻る」ボタン(1)
22
• プラグイン「Simple Scroll to Top Button」を使用する • クリックするだけで、ページのトップに戻ることができる
• 1ページのサイズが画面に収まらない時は実装すると便利である • 投稿をフロントページにするときは必須である
• 「Twenty Seventeen」で複数のセクションを使用する時も必須である • 設定-Scroll to Top からボタンの形状を指定する
10.1. 「ページトップへ戻る」ボタン(2)
①設定でScroll to Topを選択 ②ボタンの 内容を指定 ③ボタンの内容 を指定 ➃Live Preview で形状を確認 ➄設定を保存10.2. スライドショー(1)
24 • 新しいスライドショーの作成は下記の手順で行う – メニューより、Smart Sliderを選択する – New Sliderをクリックし、新しいスライドショーを作成する – スライドショーに使用する画像を取り込む – スライドの切り替え方法について設定する10.2. スライドショー(3)
26
ADD SLIDEをクリックし、画像を 取り込む
10.2. スライドショー(4)
AUTOPLAYの設定を行う 手動切替の設定を行う
10.2. スライドショー(5)
28
各スライドにアニメーションの設 定を行う
10.3.フォトギャラリー(1)
• フォトギャラリーは次の手順で作成する
– Photo Galleryを選択し、写真を取り込む
– 固定ページまたは投稿でPhoto Galleryを選択し、該当のフォトギャラリーを取り込む – フォトギャラリーの表示形式の設定を行う
10.3. フォトギャラリー(2)
30
フォトギャラリーを選択すると、 フォトギャラリーと表示形式の 設定画面が表示される。
10.4. 表(1)
32 • TinyMCE Advancedを導入すると編集画面にボタンが追加される • 固定ページ、投稿の編集が容易となる • 表形式の文書の作成も可能となる • 編集画面のボタンのカスタマイズができる10.4. 表(2)
表の挿入
セルの操作
行の操作