WordPressの導入

WordPressのインストール

・サーバー（Lolipop）の独自ドメインにログインして、「サイト作成ツール」で「簡単Wordpress」を選択する。

・事前に、これまで使用していたファイルを全て削除しておかないと、エラーとなる。

・Lolipopのphpを最新に変更する。古いバージョンでは動作しない。

LolipopサーバーのSSL化

・Lolipopの無料SSL化を行う。

・SSL化しておかないと、アップロードのURLがhttp://*****.**となり、安全性が低下する。

WordPressの基本設定

・ブラウザで、http:******.**/wp-adminを入力。「メールアドレス」「パスワード」を入力する。

・テーマの設定を行う。多く使われている「cocoon」を選択した。

「cocoon設定」で基本的な設定

・ヘッダー画像を制作して、「ヘッダー」で、ヘッダー画像を設定する。

・「SNSシェア」で、「facebook」「twitter」など、全てチェックを外す。

・「フッター」で、「フッター表示タイプ」を「メニュー＆クレジット」を選択する。

・「その他」「簡単SSL設定」で、「内部URLをSSL対応（簡易版）」にチェックを入れる。

「固定ページ」の作成

・「固定ページ」「新規追加」で、「トップページ」と「同窓会の紹介」「プライバシーポリシー」ページを作成する。

・「タイトル」「本文」を作成したら、SEO対策として、「SEOタイトル」「メタディスクリプション」「メタキーワード」を記入して、公開する。

・「固定ページ」の当該ページの「クイック編集」で、「スラッグ」を英語またはローマ字表記で入力して更新する。このスラッグがURLの一部として使われる。

（例）「同窓会の概要」ページの場合 「スラッグ」はabout

       URLはhttps://******.**/about/となる。

・「固定ページ」はページ間の親子関係を指定できる。

（例）「BB」の親が「AAAA」場合。「固定ページ」「BB」の「クイック編集」で、親に「AAAA」を指定する。「AAAA」の「スラッグ」を「aaaa」、「BB」の「スラッグ」を「bb」とすると、目次のURLは、https://******.**/aaaa/bb/となる。

「投稿」の作成

・投稿記事はアーカイブされる。

・「固定ページ」で「ニュース」を作成する。ブロックの追加で、検索で「新着記事」を追加する。

・「トップページ」にも「新着記事」を追加する。

「Contact Forms 7」の導入・設定

・「お問い合せフォーム」と「申し込みフォーム」を作成するために、「プラグイン」「新規追加」で、「Contact Forms 7」を検索して、インストールと有効化を行う。

・新しいフォームを作成すると、基本的な項目（名前、メールアドレス、題名）が表示される。

・「フォーム」で不足する項目（科名、卒業年度または卒業期、電話番号、郵便番号、住所、申し込み項目のラジオボックス）を入力する。

・「メール」設定で、「本文」に、「フォーム」で追加した項目を含める。

・「メール」設定で、自動返信メールが送信者に送るために、「メール2を使用する」にチェックを入れる。

・「メール2」の本文に、「フォーム」で追加した項目を含め、申し込み者への挨拶やお礼の言葉などを入力・保存する。

・「固定ページ」で、新しいページの作成で、「お問い合せ」と「申し込み」の固定ページを作成する。 

 この時、本文に新しいブロック追加で、「Contact Forms 7」を検索して、作成した項目を埋め込む。この「Contact Forms 7」で作成したフォームを「公開」しておかないと、表示されない。作成後、公開する。

・ホームページにアクセスして、「お問い合せフォーム」と「申し込みフォーム」のテスト・動作確認を行う。送信者とWordpress管理者に、「お問い合せ」と「申し込み」フォームで入力した、「名前」「メールアドレス」「申し込み内容」などが表示されていることを確認する。

メニューの設定

・「外観」「メニュー」でメニューの設定を行う。

・「header_navi」で、ヘッダーに表示するページを「固定ページ」から選択する。ヘッダーメニューの表示名は変更できるので、トップページは「ホーム」に変更した。

・表示順序を調整する。

・「メニュー設定」で、「ヘッダーメニュー」「モバイルヘッダーメニュー」「モバイルヘッダーボタン」にチェックを入れ、「メニューを保存」で保存する。

・「新しいメニューを作成しましょう」をクリックして、メニュー名を「fotter_navi」とする。

・フッターに表示するメニュー項目を「固定ページ」から選択する。「メニュー設定」で「フッターメニュー」と「フッターモバイルボタン」にチェックを入れ、「メニューを保存」で保存する。

＜注意事項＞

・テーマを変更すると、設定がクリアされるので、途中ではテーマの変更は行わない。

・「投稿」「固定ページ」の作成前に、「設定」で、「ハイパリンク」の設定を行う。

・「投稿」「固定ページ」の作成後に、ハイパリンクの変更を行うと、更新エラー（下図）や投稿した内容が表示されない不具合が起こる。

・使わないプラグインは削除する。

・使わないテーマは、デフォルトを一つ残して削除する。

・「ダッシュボード」の「サイトヘルスステータス」で表示された項目の対策を行う。「永続オブジェクトキャッシュを使用してください」は、Lolipopサーバーでは対応できないので無視する。

日付の表示・非表示

・日付の表示は、「cocoon設定」の「インデックス」「投稿」「本文」で「投稿日の表示」「更新日の表示」にチェックを入れる。「本文」の「投稿日の表示」「更新日の表示」にチェックが入っていないと、有効にならない。

・固定ページには投稿日と更新日を表示したくないので、追加CSSで固定ページには投稿日を表示させないコードを記述した。

・「ニュース・お知らせ」と「Wordpress」には、追加CSSで最終更新日を表示するようにした。

・追加CSSは、「外観」「カスタマイズ」「追加CSS」または「外観」「テーマエディター」「追加CSS」で書き込む。CSS（style.css）に追記することもできるが、画面を崩す危険があるので、好ましくない。

ブログカードの使い方

・投稿ページは、投稿順の表示とアーカイブの機能があり、ニュースなどに適しているので、ニュース・お知らせを投稿ページで作成した。投稿ページのタイトル、アイキャッチ画像、スニペット（本文の抜粋）をカード状にまとめたものが、ブログカードで各種の形態が用意されている。「cocoon設定」「インデックス」でカードの種類が選択できる。

・「新着記事」を固定ページに挿入すると、スニペットが表示しない（仕様）。

・プログカードを固定ページに挿入するブロックとして、投稿日順に表示する「新着記事」と「最新の投稿」とアクセス回数順に表示する「人気記事」がある。

・スニペットは、投稿ページの「メタディスクリプション」が表示される。「メタディスクリプション」に何も記述しないと、本文の先頭から指定した文字数が表示される。

・ホームページ（二渓会）と「ニュース・お知らせ」にはショートコードで新着記事をスニペット付きで表示させた。

・「設定」「表示設定」で、投稿ページで固定ページを選択して表示させることもできるが、段落や見出しなどのブロックは無視され、表示されない。

高速化

・スマホのレスポンスが悪い。

・Lolipopのアップデートで、モジュール版のphpが使用できるようになり、レスポンスが向上する。

・「cocoon設定」で、「高速化」の設定を行う。

スピードチェック

・「PageSpeed Insights」で、チェックするページのURLを入力して、「分析」をクリックする。

・「パフォーマンスの問題を診断する」で指摘された項目の改善を行う。

・「レンダリングを妨げるリソースの除外」の対策として、プラグイン「Async Jave Script」と「Autoptimize」をインストール・有効化・設定した。

バックアップ

・「プラグイン」「新規追加」で「BackWPup」を検索して、インストールして、有効化する。

・「Dropbox」にアクセスして、ユーザー登録を行う。

・「Easycron」のユーザー登録を行う。

・「DackWPup」プラグインを設定する。この時、バックアップ場所を「Dropbox」にし、 「Easycron」のAPIキーを手動入力する。

スパム対応

・Wordpressの「設定」で登録した管理者メールアドレスに、大量のスパムメールが届きはじめた。 原因は、「お問い合せフォーム」「申し込みフォーム」で使用している、プラグイン「Contact Forms 7」だった。

・代替のプラグインの利用を試みたが、通知メールや自動返信メールが上手くカスタマイズできなかったため、「Contact Forms 7」を使い、スパム対応として、「Akismet」プラグインを利用することにした。

・「Akisimet」をインストールして、「有効」にする。「Akismet」のWebサイトで、APIキーを取得して、「Akimet」の「設定」で取得したAPIキーを手動入力する。

・再度、スパムメールが着信したので、対策としてreCAPTCHAを使用した。事前にGoogleにログインしてreCAPTCHAのサイトキーとシークレットキーを取得する。Wordpressの管理画面に移動して、「お問い合せ」「インテグレーション」のページで取得したサイトキーとインテグレーションキーを入力して保存する。

・reCAPTCHAの導入により、全ページのレスポンスが低下した。対象として、「reCaptcha by BestWebSoft」をインストール・有効化と設定を行い、「お問い合せフォーム」と「申し込みフォーム」にショートコードを埋め込んだ。

・reCAPTCHA「戻る」のマークが重なるので、追加CSSで「reCAPTCHA」のマークを非表示にした。

・海外からのスパムメール対策として、「問い合わせフォーム」と「申し込みフォーム」のテキストエリアに日本語がないとエラーとなるようなコードを、functions.phpを追加した。関連して、テキストエリアの入力を必須に変更した。

・wordpressを更新すると、functions.phpが書き換わり、上記の追加コードが消えるので、追加コードを追記する。

ユーザー追加・設定

・ユーザーは権限の形態により、「管理者」「編集者」「投稿者」「寄稿者」「購読者」がある。

サイトマップ

Google Search用XMLの作成と送信

・サイトマップを作成して、Google Search Cinsoleに送信した。

・サイトマップは、プラグイン「XML Sitemaps」を使用した。プラグインを検索するときに、検索窓に”XML Sitemap”と入力すると類似のプラグインが多数表示されるので、”Auctollo”（作者）で検索する。

・プラグインをインストール・有効化して、「設定」「XML Sitemaps」で表示される、インデックスファイルのURL sitemap.xmlをGoogle Search Cinsoleの「サイトマップ」に入力して、送信する。

訪問者用サイトマップの作成

・次に、訪問者用のサイトマップのページを作成する。プラグイン「WP Sitemap Page」を検索・インストール・有効化する。

・「固定ページ」「新規作成」で、サイトマップのページを作成する。ブロックでショートコードを選択して、「[wp_sitemyap_page] 」と入力して、保存する。

・「固定ページ」で作成したサイトマップのページの「クイック編集」でパーマリンクに、「sitemap」と入力して、「公開」する。ページの確認を行う。

検索機能

検索機能用のプラグインもあるが、今回は検索ウィジェットを利用して、検索窓をホームページに追加した。

トラブル対応

「投稿」のタイトル欄が狭い

・「投稿」で、「投稿一覧」「新規追加」を表示させると、「タイトル」欄の幅が一文字分しかなく、縦長に表示される。

・表示サイズを自動的に調整しているためなので、不要な項目を表示しないようにする。具体的には、画面右上の「表示オプション」をクリックして、「コメント」などの不要な表示項目のチェックを外す。

メニューがアイコンだけになった

・左サイドのメニューがアイコンだけになった。一番下の▶アイコンをクリックすると、メニューが表示される。

「戻る」ボタンが表示されない

・ページの先頭に戻るボタンを表示させるために、「cocoon設定」「ボタン」で、「トップに戻るボタンを表示する」にチェックを入れる。

・「戻る」ボタンがスマホに表示されない。「cocoon設定」「モバイル」で、「ボタンを表示しない」を選択すると、表示された。

表（テーブル）の幅が変更できない

・エディターは、「Advanced Edit Tools」を使っている。ブロック追加で「テーブル」を選択して、表を作成した時、表の幅は自動的に調整される。

・表の幅を変更する場合は、左のブロックメニューで「クラシック版の段落」に変更する。罫線上にポインタを置きドラックすると、幅が変更できる。

レンダリングを妨げるリソースの除外

Google PageSpeed Insightsを使用してサイトのパフォーマンスを計測すると、レスポンスが低下している原因として、「レンダリングを妨げるリソースの除外」が大きかった。

対策として、Cocoonの子テーマの「function.php」ファイルをカスタマイズする方法も紹介されているが、今回はプラグインを利用する方法にした。

「Async JavaScrip」と「Autoptimize」プラグインをインストール・有効化・設定する。「Autoptimize」だけだと効果がない。

これにより、レスポンスが向上する。

WordPress用語

パーマリンク

・パーマリンクとは「Webサイトのページ毎に設定しているURL」のことです。 WordPressで投稿ページや固定ページを作成した際に表示される。ページを作成した際に、自動的に日本語で作成されていることがあるので、「クイック編集」で英数字で書き換え保存する。

・通常、固定ページはドメインの直下にできる。親子関係を設定すると、URLはhttps://サイトのドメイン/親のパーマリンク/子のパーマリンク/となる。

子テーマ

・今回は、テーマ「Cocoon」を使用している。カスタマイズの説明にある、「子テーマ」とは、/wp-content/themes/cocoon-child-master/を示す。