WordPress 研究会 2019 WordPress の機能を拡張する 第 5 回 2019 年 7 月 30 日比留間

Transcription

1 WordPress 研究会 2019 WordPress の機能を拡張する 第 5 回 2019 年 7 月 30 日比留間

2 内容 1. WordPress プラグイン 2. WordPress プラグインの探し方と導入 3. WordPress プラグインおすすめ で検索 4. WordPress プラグイン導入時の注意事項 5. さくらインターネット導入済プラグイン 6. 気になるプラグイン 7. プラグインの導入と有効化 8. プラグインの停止 削除 9. エクスポートとインポート 10. コンテンツを充実させる 2

3 1. WordPress プラグイン WordPress の機能を拡張する部品 プラグインの主な種類記事執筆に便利なプラグイン 写真の表示に関するプラグイン表を簡単に作成するプラグイン画像のスライダーを作成するプラグイン人気記事や関連記事を表示させるプラグイン SNSとの連携に便利なプラグイン掲示板を実装するときに便利なプラグインアクセス解析に便利なプラグイン目次を追加するプラグイン カテゴリーの操作に便利なプラグインサイトのバックアップに便利なプラグインサイトのセキュリティを向上させるプラグインサイトの表示を高速化させるプラグインサイトの見た目を変更するプラグイン管理画面を変更するプラグイン読者とのやりとりに便利なプラグイン SEO 対策 ( 検索エンジン最適化 ) に有効なプラグイン 参照資料 : 3

4 2. WordPress プラグインの探し方と導入 実現したいことの具体化 サービスプロバイダーの情報の活用 インターネット情報の検索 プラグインの机上の評価 プラグインの試行 プラグインの試行の評価 本番システムへの導入 4

5 3. WordPress プラグインおすすめ で検索 (1) WordPress のおすすめプラグインは 8 つだけ 断言します 年版 WordPress のおすすめプラグイン 10 選 初心者にオススメ! とりあえずいれておけば安心な WordPress プラグイン 10 選 年版 インストール必須のおすすめ WordPress プラグイン 19 選 wordpress で絶対入れるへ きプラグインおすすめ 5 選とその使い方 5

6 3. WordPress プラグインおすすめ で検索 (2) *WordPress 初心者におすすめの超便利な機能別プラグイン 60 選 * おすすめ記事 WordPress プラグインでおすすめ [2018 年 ]: 本当に役立つの これは入れとけ 11 個のおすすめ WordPress プラグインを厳選したぞ 年 おすすめの WordPress プラグイン 無料 定番多め 22 個 *WordPress の優良プラグイン 50 選 ブログ運営を効率化できる * おすすめ記事 6

7 4. WordPress プラグイン導入時の注意事項 (1) WordPress プラグインをいきなり本番環境に導入せず 別に用意したテスト環境で試した上で本番環境に導入する プラグインをインストールする前に WordPress のデータベースを必ずバックアップする サーバー環境によってはプラグインにエラーが発生する場合がある 十分にご注意する WordPress のプラグインは 入れすぎると管理が難しくなり セキュリティ面でもリスクが増える おすすめプラグインでも なるへ くひとつひとつ慎重にインストールして しっかり動作するか確認してから 次のプラグインをインストールするようにする プラグイン名 + エラー という検索方法をしても ある程度のプラグインの評判やデメリットを知ることができるので インストール前にチェックする 慣れるほどにプラグインは少なくても足りると感じるはずなので サイトに合ったものを厳選してインストールする 7

8 4. WordPress プラグイン導入時の注意事項 (2) WordPress の テーマ によっては プラグインで入れなくても初期段階でいろいろなことができるようになっているテーマもある プラグインを入れる前に 今使っているテーマに の機能はないか? というのをチェックする 10 個 ~20 個以内くらいに抑えるのが理想である もし これはいい! と思えるお気に入りのものに出会ったら 自分専用のプラグインリストとして保存する WordPress プラグインをたくさんインストールするデメリット プログラムが重くなり 執筆も閲覧も遅くなる 組み合わせで相性の悪いプラグインもある セキュリティ上のリスクが増えて安全に使えなくなる 8

9 5. さくらインターネット導入済プラグイン (1) プラグイン Akismet Anti-Spam All In One WP Security& Firewall Autoptimize Disable Google Fonts ImageMagick Engine Protect Uploads 機能 ブログへの迷惑なスパムコメントを判別して自動削除する WordPress のセキュリティ対策の設定を一元管理できる ウェブサイトを最適化し CSS コードと JavaScript コードを連結し圧縮する Google 社が提供している Web Fonts を使用しない設定を適用する WordPress を SSL 化した際に生じる不具合 ( 警告の表示 ) の回避や サーバの応答速度の向上が期待できる WordPress で自動生成されるサムネイル画像の画質を落とさずにファイルサイズを縮小する アップロードディレクトリにインデックスファイルを作成する WordPress 経由でファイルをサーバへアップロードを行った際に作成されたディレクトリ ( フォルダ ) に対し ファイル一覧の応答を抑制する 9

10 5. さくらインターネット導入済プラグイン (2) プラグイン Remove Query Strings From Static Resources SAKURA RS WP SSL TS Webfonts for SAKURA RS WP Multibyte Patch 機能 サーバから CSS や JavaScript ファイルを取得する際 付与されていたクエリストリングを削除する サーバの応答速度の向上が期待できる さくらのレンタルサーバ上の WordPress で 常時 SSL 化を簡単に行える さくらのレンタルサーバで株式会社モリサワ提供の Web フォント 30 書体が無料で利用できる WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行う 10

11 6. 気になるプラグイン プラグイン 機能 TinyMCE Advanced Contact Form7 Category Order and Taxonomy Terms Order Password Protected Theme Authenticity Checker Crazy Bone SiteGuard WP Plugin All-in-one WP Migration Force Login WordPress に標準搭載されているビジュアルエディタの機能を強化できる お問い合わせフォームの作成 カテゴリーの順番を手動で変更できる サイト全体にパスワード認証を設定できる WordPress のテーマに悪意のあるコードが含まれていないかを確認できる ログイン情報を記録してくれる サイトを守るための機能が多くて高性能 メールでの通知があるので不審なログインも察知しやすい WordPress のインポートとエクスポートが簡単に実施できる ユーザー登録していないとサイトが閲覧できない 11

12 7. プラグインの導入と有効化 編集機能を拡張するプラグイン システム機能を拡張するプラグイン さくらインターネット導入済みプラグイン 12

13 7.1. 編集機能を拡張するプラグイン TinyMCE Advanced TinyMCE Templates Photo Gallery Smart Slider 3 Contact Form7 Category Order and Taxonomy Terms Order 13

14 7.2. システム機能を拡張するプラグイン Akismet Anti-Spam ブログへの迷惑なスパムコメントを判別して自動削除する インターネット情報の活用 Akismetの設定方法! スパムコメントをブロックしよう! 取得したAPIキーは保存する ほかのWordPressにも同じキーを設定できる SAKURA RS WP SSL 常時 SSL 化を行う さくらサポート情報の活用 WordPress 常時 SSL 化プラグインの使い方 All-in-one WP migration Simple Scroll to Top Button 14

15 7.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 WP Multibyte Patch 15

16 8. プラグインの停止 削除 Hello Dolly 有効化 : 停止をクリック 停止 : 削除をクリック 削除 16

17 9. エクスポートとインポート プラグイン All-in-One WP Migration を使用して行う エクスポート ホームページのすへ ての情報をPCにファイル形式でダウンロードする ダウンロードしたファイルはインポートで使用する ホームページはダウンロードした時点の情報で復元できる インポート ホームページをエクスポートしたファイルで復元をする WordPressとAll-in-One WP migrationを導入した環境で使用する エクスポートしたファイルを使用してインポートする ホームページはエクスポートしてファイルの情報で復元される ユーザー ID/ パスワードもすへ て元の情報に戻る 17

18 9.1. エクスポートの手順 3Download~ をクリック 1 エクスポートを選択 ➄ 保存が完了したら閉じるをクリック 2 ファイルを選択 ➃ 保存をクリック 同一フォルダ上にインポートする場合はエクスポートではなくバックアップを選択 18

19 9.2. インポートの手順 1 インポートを選択 3 開始をクリックすると 2 エクスポートファイルを指定 ➃ 完了後 閉じるをクリック 19

20 9.2. インポート上の注意 インポートするWordPressのフォルダを削除する 同一名称のフォルダにWordPress とAll-in-One WP Migrationを導入する フォルダを削除しないとエラーとなる 有料オプション導入済みではエラーにならない フォルダを削除しないのであればエクスポートではなく バックアップを使用する 20

21 10. コンテンツを充実させる ページトップへ戻る ボタンを設置する スライドショーを設定する フォトギャラリーを作成する 入力フォームをホームページに設置する 21

22 10.1. ページトップへ戻る ボタン (1) プラグイン Simple Scroll to Top Button を使用する クリックするだけで ページのトップに戻ることができる 1ページのサイズが画面に収まらない時は実装すると便利である 投稿をフロントページにするときは必須である Twenty Seventeen で複数のセクションを使用する時も必須である 設定 -Scroll to Top からボタンの形状を指定する 22

23 10.1. ページトップへ戻る ボタン (2) 1 設定で Scroll to Top を選択 3 ボタンの内容を指定 2 ボタンの内容を指定 ➄ 設定を保存 ➃Live Preview で形状を確認 23

24 10.2. スライドショー (1) 新しいスライドショーの作成は下記の手順で行う メニューより Smart Sliderを選択する New Sliderをクリックし 新しいスライドショーを作成する スライドショーに使用する画像を取り込む スライドの切り替え方法について設定する 24

25 10.2. スライドショー (2) 新規スライドショーを作成する 25

26 10.2. スライドショー (3) ADD SLIDE をクリックし 画像を取り込む 26

27 10.2. スライドショー (4) 手動切替の設定を行う AUTOPLAY の設定を行う 27

28 10.2. スライドショー (5) 各スライドにアニメーションの設定を行う 28

29 10.3. フォトギャラリー (1) フォトギャラリーは次の手順で作成する Photo Galleryを選択し 写真を取り込む 固定ページまたは投稿でPhoto Galleryを選択し 該当のフォトギャラリーを取り込む フォトギャラリーの表示形式の設定を行う 29

30 10.3. フォトギャラリー (2) フォトギャラリーを選択すると フォトギャラリーと表示形式の設定画面が表示される 30

31 10.3. フォトギャラリー (3) サムネール スライドショーの表示例 31

32 10.4. 表 (1) TinyMCE Advancedを導入すると編集画面にボタンが追加される 固定ページ 投稿の編集が容易となる 表形式の文書の作成も可能となる 編集画面のボタンのカスタマイズができる TinyMCE Advanced を導入前 TinyMCE Advanced を導入後 32

33 10.4. 表 (2) 表の挿入 行の操作 セルの操作 列の操作 33

34 10.5. 問い合わせ (1) Contact Form7を使用してフォームを作成する Contact Form7のルールに従い フォームを作成する フォームを作成すると ショートコードがアサインされる 固定ページにショートコードを貼り付ける 固定ページを表示すると 入力フォームが設置されている 34

35 10.5. 問い合わせ (2) 35

36 個別相談会