WordPress プラグイン編

様々なプラグインを調べて、試して、学ぶ方法を学ぼう

講座資料（PDF）

[wc-restrict id=”5814,6004″ wcr_id=”10534″ message=”講座資料を見るには、お申し込みが必要です”]

ダウンロードして、参加者の人数分印刷して使用してください。

[/wc-restrict]

ワークショップ動画

講座の意図、狙いを理解しながら動画を見ましょう。

イントロダクション

ウォームアップ

ウォームアップ2

プラグイン探求1

[wc-restrict id=”5814,6004″ wcr_id=”10534″ message=”以降の動画を見るには、お申し込みが必要です”]

プラグイン探求1 振り返り

プラグイン探求2

プラグイン探求2 振り返り

プラグイン自由研究

特典マニュアル

プラグインを追加してみよう

WordPressがiPhoneなら、プラグインは「アプリ」のようなものです。実現したいことを実現できるアプリをインストールして、使うことで思い通りの機能を持ったWebサイトを作ることができます。

例 :「お問い合わせ」を実現するために、お問い合わせフォームを作成するプラグインをインストールする。

プラグインをインストールする

(1) ダッシュボードの左部分から、「プラグイン」を選択する

(2)「新規追加」を選択する

(3) お好きなプラグインを選択して、「今すぐインストール」=>「有効化」を選択する

(4) ダッシュボードのどこかに、追加したプラグインの表示が出ているのを確認する

(5) 完了

また、プラグインもテーマと同様にZIPファイルからダウンロードすることもできます。Restrict Content Pro などの高機能プラグインを使う際は必ず必要になってきますので、ぜひマスターしておきましょう。

プラグインを選ぶ方法

良いプラグインの見極め方

その前に、一番大切なことを紹介します。
「使ってみて決める」ことです。

よく、「どれが一番いいんですか？」と人に尋ねたり、たくさんの説明書を読んで1つのプラグインを決める人がいますが、1番良いというのは、サイトの目的によっても変わりますし、使い勝手も人によって様々です。

つまり、「どれを使うのか決めて、使い始める」のではなく、「いろいろ使いながら、決める」ことが重要です。

今から紹介する「良いプラグインの見極め方」は、たった1つを探すためではなく、大量の中から複数を探すために使ってください。

1 . 評価が高いものを選ぶ
わざわざ評価をするユーザーは、いろんなプラグインを試して使っています。そのため、評価を基準に選ぶと効率的に、便利なプラグインを選択することができます。

2. 有料アップグレードがあるものを選ぶ
有料アップグレードがあるプラグインは、便利で使い易いものが多いです。
有料でプラグインを作っている会社は、あつめた資金で「より使い易く」「より便利に」と継続的な開発を行っています。
その会社が出している無料版のプラグインは、「有料版から、いくつかの機能を抜いたもの」だったり、するので無料でも十分便利で使い易いプラグインだったりします。

3. 最近アップデートをしているものを選ぶ
ITの世界は変化のスピードが早いです。
プラグインを支えている技術や、ユーザーの要望がどんどん変わるため、日々アップデートをしております。
なので、使いたいプラグインの最新アップデートがいつなのかを必ずチェックしておきましょう。

【必須機能】日本語化

作りたいサイトを実現する時には、様々なテーマやプラグインを使うことが多いですが、中には英語しかないものもあります。
例えば、Restrict Content Pro という会員サイトを作るために必須のプラグインがありますが、初期設定では英語のままなので、以下のような表示になってしまいます。

そこで、「Loco Translate」というプラグインを使用することで英語表記を日本語表記にしましょう。
(1) 「Loco Translate」をインストールして、有効化する

(2) 編集画面の左メニューより「locotranslate」「Home」を選択する

(3) 翻訳したい「テーマ名」か「プラグイン名」を選択する

(4) 日本語を選択する



(5) 翻訳する
このページ内の「Username」を「ユーザー名」に変更する


(6) 完了

なお、Loco translateを使うと、「別サイトで翻訳したデータを新サイトでも使う」ことができます。どんな時に使うかというと、例えばAというサイトで、100箇所翻訳したものを、Bというサイトでもう一度作らなくてはいけない場合などです。Bサイトを作成し始めた時に0から翻訳するのではなく、Aのサイトで翻訳したデータを使うことができます。方法は以下です。

(1) Aサイトから「poファイル」「moファイル」をダウンロードする

(2) Bサイトに、「Loco translate」をインストールする
(3) FTPソフトを使って、Bサイトの指定の場所に、サーバーにAサイトでダウンロードした「Poファイル」「moファイル」を使って、上書きする
特定の場所hは多くの場合、Bサイトの 「wp-content > languages」にあります。

【必須機能】お問い合わせフォームを作ろう

どんなサイトを作る際も、欠かせないのが「お問い合わせフォーム」です。「WP Forms」というプラグインを使って、お問い合わせフォームを作成しましょう。
お問い合わせフォーム

(1) プラグインをインストールする


(2) 編集画面の左側のメニューの中に出現した、「Wp Forms」より、「Add New(新規追加)」を選択

(3) フォームのタイトルを入力し、フォームのテンプレートを選択

(4) あなたが、作成したい項目に合わせて、入力していく

(5) 画面左の編集画面に、必要な文字を入力する。(編集した結果、どこが変更するかわからない場合は、右の画面の変化をゆっくり見てみましょう)

(6) 追加したい項目を左の「項目一覧」より選択し、ドラッグ&ドロップで入力しましょう。

(7) 必要な項目の入力が完了したら、「フォーム入力後の自動表示」や「自動返信メール」の設定を編集します。

(8) サイト閲覧者がフォームを入力したことをお知らせするメールの設定を行います。

用語 意味
admin email 管理者名 (サイトの管理者アカウントのメールアドレス)
{field_id} フォーム内の入力した内容を自動で表示する(例 =1 ならメールアドレス)

メールアドレスのID = 1 を確認する場合は、フォームないのココに注目するとわかります。この(フォームID)をうまく使うことで、{field_id} の中に、お好きな値を自動で入力することができます。

(9) フォーム入力後に表示する内容を入力します。

(10) フォームが完成したら、埋め込みコードを取得しましょう

(11) 「お問い合わせ」という固定ページを作成し、埋め込みコードを入力しましょう。

(12) 完成

(13) フォームに入力すると、編集した文字が表示される

【必須機能】アクセス解析を設定しよう

アクセス解析をして、アクセス数や、訪問者がどのルートから訪れてきているのかを把握することで、サイト運営に大変役にたちます。

「jetpack by WordPress.com」というプラグインを使って、実装してみましょう。
なお、「jetpack by WordPress.com」はwordpress.comのアカウントで運用します。
このアカウントは、あなたが作成しているwordpessのサイトにログインしたものとは違うので、持っていない方は作成して下さい。
(1) jetpack by WordPress.com をインストールする

(2) 有効化をすると、このような画面になるので、wordpress.com で連携する

(3) WordPress.com のアカウントでログインする(持っていない方は、新規アカウント作成を行ってください。)

(4) jetpackにwordpressアカウント情報を渡すことを承認する

(5) プラン一覧の中より、まずは無料プランを選択

(6) 「Active Recomended futures」をクリックして、Jetpackをアクティブにする

(7) 完了

【必須機能】バックアップを取ろう

バックアップの仕組み

バックアップをしっかり取っておけば、もし、あなたのWordPressのサイトに何しらの問題が起きても心配ありません。
元のWebサイトを「復元」することで元に戻すことができます。

まずは、WordPressの裏の仕組みのおさらい


WordPressのWebサイトの裏側には

  • サーバー
  • データーベース

があります。
そして、それぞれの中には

  • サーバー
    • 実行ファイル・・WordPressを動かすためのデータ
    • Contentsファイル・・オリジナルの情報(テーマ、プラグイン、アップドーロファイルなど)
  • データベース
    • データベース・・オリジナルの情報(投稿ページ、固定ページなど)

が入っています。

バックアップの仕組み


バックアップを使うと、Webサイトの「復元」に必要な情報を別の場所に保管することができます。
WordPressの場合は、投稿や画像などのオリジナルのコンテンツが入っているファイルが「データベース、テーマ、プラグイン、アップロードファイル」なので、「データベース」と「Contents」ファイルをバックアップします。
その結果、仮にサーバーやWordPressのサイトに問題が起きて白紙になってしまっても、別の場所からバックアップデータをインストールすることで復元することができます。

バックアップは細かく取っておこう

バックアップは取ったタイミングの情報を保管して置く機能です。
もし、バックアップデータが1年前のものであれば、1年前のWebサイトしか復元することしかできません。
バックアップに使うプラグインは、大抵

  • 手動で行う設定
  • 定期的に自動で行う設定

があります。
用途に合わせて、うまく使いこなしましょう。

バックアップをとる方法

WordOPressのサイトのバックアップは、「プラグイン」を使います。今回使うプラグインは

  • 「UpdraftPlus Backups」

です。

バックアップをとる手順

バックアップをとる手順は4ステップです。

(1) プラグインをインストール、有効化する

まずは「UpdraftPlus Backups」をインストールして、有効化しましょう。

(2) バックアップの「保存先」を選択する

UpdraftPlusBackups でバックアップを取る前に、「保存先」の設定をしましょう。断然Dropboxが簡単なのでオススメです。


(3) バックアップを取る

保存先の設定が完了したら、バックアップを取りましょう。



(4) 保存先にバックが取れているかを確認する

今回のように「保存先」を設定している場合は、

  1. 編集しているサーバーの中
  2. 保存先

の両方にバックアップデータを保存しています。
(3)のプロセスで確認したのは、編集しているサーバーの中のデータなので、念のため「保存先」の中も確認して起きましょう。
今回は、保存先をドロップボックスを選択したので、ドロップボックスの中を確認しましょう。

バックアップから復元をする方法

復元をする際は、基本的にはバックアップを取ったプラグインを使います。
今回の復元は、バックアップを取るときに使った「UpdraftPlussBackups」のプラグインを使う方法で説明します。

「復元する」方法

復元は、過去に取ったバックアップデータを選択してインストールすることで実現することができます。





「保存先」のバックアップデータから復元する方法

WordPressやプラグインを再度インストールすると、プラグインの編集画面から、以前取っていたバックアップが表示されなくなります。

その場合は、あらかじめサーバーの外に保管しておいた場所 (Dropboxなど)からバックアップを再スキャンして、復元しましょう。

(1) 外部の「保存先」と紐付ける





(2)バックアップデータを再スキャンする


(3)復元する


【必須機能】メールサーバー設定しよう

迷惑メールにならないようにするには、３つのことを行うことが有効です。

  1. 送信するサーバーと、メール送信サーバーを同じにする
  2. DNSにSPFレコードを登録する
  3. 迷惑メールになりづらい「SMTPサービス」を利用する

具体的には、
WordPressに自動返信ができるフォームを貼り付け、自動返信するメールアドレスと、サーバーのドメインが違う場合、迷惑メール判定されやすいです。
例えば、
WordPressに フォームを設置し、 [email protected](例です) を自動返信で使う「送信者」として設定します。
Gmailは、Googleのサーバーから本来送られるはずですが、ご自身のWordPressを設置しているサーバーから、メールが送信されることになります。
結果、「おかしい、変なところからGmailアドレスのメールが送られているぞ」となり、
迷惑メールになります。

そこで、2 の DNS に SPFレコードを登録することで、回避することができます。
迷惑メールにならないための対策は、サーバーの仕組み、DNSの設定を理解する必要があり、難しいです。
そこで、最も簡単な方法が「SMTP設定」です。この設定を行うことで、

  • いつも利用しているメールサーバーから、メールを送信する

ことができ、難しいことを考えず、迷惑メール対策ができます（通常、レンタルサーバー側が迷惑メール対策をしてくれているはずなので。ただし、やすいレンタルサーバーや無名なものは期待できません）。

また、Gmail や G Suite を利用している人は、このSMTP設定を行うことを推奨します。

Gmail、GSuiteを使う場合

Gmail SMTP プラグインを利用します。

プラグインのインストール

  • 検索
  • インストール
  • 有効

設定方法

Gmail、GSuite で「外部のプログラムから、メール送信をする」には、許可を申請する必要があります。簡単に利用できないようにして、迷惑メール送信に利用されないためです。
手順としては、(1)Gmail送信の許可を得る、(2)プラグインの設定、(3)テスト となります。
WordPressとGoogleの管理画面を行ったりきたりするので、ブラウザのタブを活用してください。

(1) Gmail送信の許可を得る

Gmail送信の許可設定 をクリックして、 送信予定のメールアドレスでログイン してください。
以下のような、ページが表示されるので「プロジェクトの作成」を続行させます（しばらく待ってください）。

しばらく待つと、以下のような表示に変わります。「認証情報に進む」を選んでください。

以下のように、Gmail API を選び、ウェブサーバー を選び、ユーザーデータを選びます。次に「必要な認証情報」をクリックします。

次の項目では、名前 には、後で識別できる名前を入れます（なんでも良いです。例えば、 「XXX用メール送信（XXXはサイトの名前）」など）。
承認済みのJavaScript生成元 には、サイトのURLを入れます。以下の例のように末尾に（ / )を入れないようにしてください。また、ディレクトリは不要です。
認証ずみのリダイレクトURL には、Gmail SMTPの設定にある「Authorized Redirect URI」を入力します。
最後に、クライアントIDの作成 をクリックします。

※ Authorized Redirect URI の入手方法
WordPressにログインし、管理画面を開き、設定 -> Gmail SMTPを開きます。

最後のステップ3では、「メールアドレスの確認」と、サービス名の表示名を設定します。名前は好きなもので構いません。例えば、 「Gmail SMTP認証」など。
次へを押してください。

クライアントIDが作られますが、それだけでは足りないので「後で」をクリックして、次の画面に進みます。

鉛筆アイコンをクリックします。

下の画像を参考に「クライアントID」と「クライアントシークレット」の場所を確認してください。それぞれを、Gmail SMTP の設定画面に貼り付けます。

(2) Gmail SMTPを設定する

※ 以下は、WordPressで作業します
さらに、TLSを選び、587を入れます。 Disable SSL Certificate Verification のチェックは入れないようにします。

Save Changes をクリックして、設定を保存しましょう。
最後に「Save Changes」の下にある「Grant Permission」をクリックします。

Googleの認証画面に移動するので、設定したメールアドレスでログインし、認証を完了させます。

うまくいけば、Connected と表示されます。

(3) テストを行う

Test Emailタブをクリックして、テストしてください。

無事、届けばOKです。

Gmail、GSuite以外の場合

WPForms が提供する、SMTP設定のプラグインを利用します。

プラグインのインストール

  1. 検索
  2. インストール
  3. 有効化

設定方法

(1) WP Mail SMTP by WPForms プラグインをインストールし、有効化する

(2) ダッシュボードの左部分より、「編集」=>「メール」を選択

(3) 必要な項目を入力する

項目 入力する内容
From Email あなたのメールアドレスを入力する（gmailやyahooなど）
From Name あなたの企業の名前やサイトの名前を入力しましょう
メーラー 「WordPressの全てのメールをSMTP経由で送信する。」にチェックを入れる
Return Path 「Set the return-path to match the From Email」にチェックを入れる

(4) SMTP設定をする

項目 入力する内容
SMTP Host smtp.gmail.com (※1 お使いのサーバーにアクセスして、メールサーバー情報を獲得してください)
SMTP Port 465
Encryption 「SSLを使用する。」を選択する
Authentication 「「はい: SMTP認証を使用します。」を選択する
Username あなたのGmailのメールアドレスを入力してください

※1 gmailを使っている場合は、「smtp.gmail.com」をご利用下さい。

(5) テストメールを送信する

true と出れば完了。falseと出たら入力にミスがあるので、再度やり直してください。

【デザイン】目次を作ろう

サイト内に、複数の情報を掲載する時に便利なのが「目次」です。目次を作ることで、サイトを閲覧する人が「欲しい情報」を確実に見つけることをサポートすることができます。
使うプラグインは「Table of Contents Plus」です。

(1) プラグインをインストールし、有効化

(2) 見出しの多いページにアクセスして、確かめる

(3) 詳細を編集する場合は、編集画面の左部分の左メニューより「設定」=>「TOC+」を選択


【デザイン】ページを装飾しよう

ページを装飾することで、綺麗で、美しいページを作ることができるようになります。
「Shortcodes Ultimate」は、装飾できる道具がたくさん入った、デザインプラグインです。
おまじない(ショートコード)を使って、あっという間にいい感じの装飾をすることができます。

Shortcode Ultimateには、無数の装飾機能が入っていますが、使用方法は同じです。

  1. 使いたい装飾機能を選ぶ
  2. 実際に使って、どんなことができるのか確認してみる
  3. 自分の使いたい設定に調整する

です。
はじめに、「全ての装飾機能を覚えよう」とすると、使い始めるまでにかなりの時間がかかってしまいます。大切なことは「その場で学ぶ」ことです。
以下では、上記で説明したような、3ステップを具体的に紹介しているので、解説を見ながら真似して操作しましょう。そして、3ステップの感覚になれたら、他の機能も触ってみましょう。
(1) 「Shotcode Ultimate」をインストールして、有効化する

(2) 固定ページや投稿ページ内に、「ショートコードを挿入」という文字が出てくるので、クリックする (テスト用で固定ページを作って、操作をしてみましょう)

(3) ショートコード(おまじない)一覧が表示されるので、「ボックス」を選択してみましょう

(4) ボックス の詳細画面が表示されます。

(5) よくわからない場合は、とりあえず「ショートコードを挿入」をしてみましょう

(6) ページ内に、ショートコードが挿入されます。実際のページでどうなっているのかを確認してみましょう。

(7) 更新をしてみると、ページ内にボックスが出現する。これで、「ボックス」という機能がなんとなくどんな装飾機能なのかわかります。

(8)もっと詳しくボックス装飾機能を理解するために、おまじないで囲まれた文字を編集して、プレビューしてみます。

(9)すると、ボックスの中に書かれている文字が変わりました。このようにページ内に挿入されたショートコードを変更してみて、「何がどう変わるのか？」を確認してみましょう。

(10) 今後は、もう一度ボックスを挿入するのですが、詳細設定も変更してみましょう。どうなりそうか予想することが重要です。後からの記憶への定着率がグンとアップします。

(11) 詳細設定後、再度「ショートコードを挿入」をクリックしてみると、ショートコード内に、謎の文字が挿入されました。

(12) プレビューして確かめてみると、詳細設定で変更した点は「ボックスのグラデーション」と「色」だったことが判明しました。

(13) つまり、おまじないの中に書かれた文字を追加したり、変更することで、装飾機能の詳細を設定することができます。

一度、ここまでわかったことをまとめると

  • 装飾機能を追加すると、ページ内にショートコード(おまじない)が追加される
  • おまじないの書き方は、[おまじない]〇〇[/おまじない]
  • すると、〇〇に対して、おまじないの内容が適応される
  • おまじないの詳細を設定する場合は、「おまじない XX△△※※」〇〇[/おまじない]とかく

です。
(14)後は、いろんな装飾機能を試してみましょう。この「その場でなれる」力がアップすると、「あー、あんな装飾したいなあ」と思った瞬間に、すぐに機能を見つけ、使うことができるようになります

よく使うおまじない
ちなみに、私たちがよく使うおまじないをいくつか紹介しているので、何から触って身ようか悩んでいる方はぜひ参考にしてみて下さい。

 

プラグインを使おう

今日は、２つのプラグインを使って、Webサイトの装飾について学びます。
使うのは、以下のプラグインです。

  • Shortcodes Ultimate
  • Bootstrap ShortCodes

この2つのプラグインをマスターして、Webサイトを装飾しましょう。

【デザイン】ページ上部のタイトルを消す

固定ページや、投稿ページのタイトルが、ページ上部に反映されるのが気になる方は、「SHK hide title」を使いましょう。あっという間に消すことができます。

(1) 「SKH hide title」をインストールして、有効化する


(2) 固定ページや投稿ページ内に、「hide title」という項目が出現するので、チェックを入れて更新をする

(3) プレビューして、確認する

【デザイン】お知らせ一覧の作り方

「Display Posts Shortcode」というプラグインを使えば、最新の記事や投稿などを、一覧として表示をすることができます。

(1) 「Display Posts Shortcode」のプラグインをインストールして、有効化する

(2) 「お知らせ一覧」というタイトルの固定ページを新規で作ります。

(3)ページ内に[display-posts posts_per_page=”20″] というショートコード(おまじない)を貼り付けます。

(4) プレビューをして、ページがどのように表示されているかを確かめて、完了。

目次の表示の仕方を工夫する

「Display Posts Shortcode」というプラグインは、おまじないを工夫することで、目次の表示の仕方を工夫することができます。
例えば、表示するを10個までにしたり、「お知らせ」というカテゴリの投稿のみを表示したりすることができます。
以下では、「「お知らせ」というカテゴリのついた投稿のみを表示する」を例に、目次の表示の工夫の仕方を紹介します。
(1) ショートコードの中に、category=”お知らせ” を追加する

(2) 投稿のカテゴリを調整する。




(3) 「お知らせ一覧」の固定ページを更新してみる

(4) このように、おまじないの中身に文字(パラメータという)を付け足すことで、目次の表示の仕方を工夫できる

よく使うパラメータ一覧

パラメータ 機能 例
posts_per_page 表示させる件数を指定 posts_per_page=”5″：5件表示
post_type 投稿タイプ post_type=”event”：投稿タイプ「event」
include_date 日時表示 include_date=”true” date_format=”F j, Y”
image_size 画像を表示させる image_size=”thumbnail”
category カテゴリー category=”news”
[/wc-restrict]

ティーチャー

[wc-restrict id=”5815″ wcr_id=”10561″ message=”WordPress プラグイン編 – ティーチャー”]

ワークショップ進行レジュメ

以下のリンクを「副クリック」し、保存してください

[/wc-restrict] --