インフラ

WordPressの始め方&有用プラグイン/テーマ/開発法まとめ

更新日

目次

WordPressとは&世界のWebサイトでのシェアとその価値

WordPressは世界で1番のシェアを占めるCGM(コンテンツマネジメント)の無料ソフトです。

機能をプラグインというもので手軽に拡張できるので、ブログやニュースサイトに使われるだけでなく、○○データベースみたいなサービスにも使われています。
VpsHikaku.comもWordPressをCGM部分については基盤として活用しています。

CGMだけでなく、Webサイト全体で見ても、その1/3以上がWordPressで作られているという調査結果が出ており、またそのシェアも伸び続けているので、WordPressを使う事はWebサイト運営を運営する(Web技術者になる)為の第一歩になります。

[世界のトラフィック上位1000万サイトでのWordPressが使われている割合推移]

また、開発者であっても、0から開発する事は美徳ではなく、WordPressで出来る事ならWPを活用して開発せずに、素早く低コストで目的を実現し、運用も楽する方が正解なので、WordPressで出来る事とその限界を知っておく事は、技術者の素養として習得は不可欠です。

ここではWordPressを使えるようになる方法について
・レンタルサーバーのテンプレートを使って構築する方法
・VPSのテンプレートを使って構築する方法
・自分でゼロからインストールする方法(公式のやり方とよりエンジニア向きのやり方)
について、説明させて頂きます。

利用開始方法1(初級者向): WordPressのインストールテンプレートを用意しているレンタルサーバー

レンタルサーバー(共有サーバー)は、WordPressのインストールテンプレートを用意しているので、使い始めるだけならば、画面案内に従っているだけで簡単に行えます。
レンタルサーバー比較.comの方で、主要なレンタルサーバーのスペック比較・絞込みが出来るので、「WordPress可能」の絞込み機能を活用して、最適なレンタルサーバーをお選び下さい。

利用開始方法2(中級者向): WordPressのインストールテンプレートを用意しているVPS

使うサーバーのスペックを選んで、後はWordPressがインストールされた状態のサーバーとして起動する事を選ぶと、WordPressがインストールされた状態のVPSサーバが使えるサービスになります。

但し、自分で管理するVPSサーバーとして提供されてくるものなので、VPSサーバー自体の運用は自分でしていく必要が出てきます。

その代わり、簡単にWordPressを利用出来るという事と、WordPressに対する自由度の最大化と、サーバの独立性を兼ねれる選択になります。
逆に言えばWordPress本体の更新等も自分でやっていかなくてはいけませんが。

どのVPSが良いかは、VPS性能比較表お勧めVPS選択フローチャート、そしてそれぞれのVPSの特徴解説ページを見て決めて頂ければと。
以下がWordPressのインストールテンプレートを提供しているVPSになります。

AWS LightsailWordPressアイコンをクリックしてインスタンス作成
ConoHaアプリケーションタブをクリックして「かんたんKUSANAGI」を選べば良い。但し「かんたんクサナギ」はメモリ1GB以上のインスタンスでないと選べない。唯の「WordPress(KUSANAGI)」なら512MBのプランでも可
DigitalOceanMarketplaceタブをクリックしWordPressを選択。OSはUbuntuになる
Linodeサーバを追加する時にOne ClickタブをクリックしてWordPressを選択
Vultrサーバを追加する時にApplicationタブをクリックしてWordPressを選択(OSはUbuntu)

利用開始方法3(上級者向): 自分で0からWordPressをインストール

前準備

  1. VPS選び
  2. OS設定
  3. Webサーバー設定(Apache等)
  4. PHP7.x
  5. データベース(MariaDB)

のインストールを済ましてからこの作業を行います。


WordPress運営の公式のマニュアルに従ったインストール

流れとしては、https://wordpress.org/download/からWordPressのソースファイルをダウンロードし、圧縮されたファイルを解凍し、必要な設定をしていく事になります。

そこからの詳しい手順については、公式の手順に従う場合には、こちらの外部文章をご参照下さい。


エンジニア向きのcomposerでバージョン管理しdockerで開発環境構築する方法

・composer(WP本体/Plugin/テーマの管理は全てcomposer経由でする)
・ローカルの開発環境はdockerで簡単に立ち上げられる
という構成として、テンプレレポジトリを
https://github.com/hikarine3/docker-bedrock-wordpress
で提供させて頂いております。

Composerの仕組みについてはhttps://roots.io/bedrock/をベースにしています。

肝はPHPのcomposerでWordpressの全ての更新を管理する事ですが、Dockerもセットになっているので、ローカルPCでの開発も手軽にする事ができる構成になっており、便利かと思います。

composerとdockerの使い方が分かる方はお試し下さい。

WordPressをインストールした後の設定


「設定 > 一般(Settings > General)」の設定

  1. サイトのタイトルをSEOの側面も考えつつ適切に設定
  2. “Just another WordPress site”という値が入っているキャッチフレーズは空に
  3. タイムゾーンをUTC+0からUTC+9に変更する(=日本の時間)
  4. 日付のフォーマットをを2019-01-04の形式に変更
  5. 時刻フォーマットを18:42の形式に変更

し保存


「設定 > 投稿設定の設定」

もしもブログを描かれるのならば、更新情報を送るPingサーバーを追加指定しましょう。
日本で生きてるブログ検索のPingサーバーはブログ検索/解析 皆声のPingサーバー位ですが、折角なのでついでしておいて頂ければと。
Pingサーバーのアドレスは
https://ping.minakoe.jp/ping/xmlrpc.asp
です。


「設定 > 表示設定」の設定

トップページに投稿した記事一覧ではなく、自分が編集したページを表示したい場合、「投稿 > 固定ページ」でページを投稿・公開した後、「ホームページの表示」にてトップページとして表示する固定ページをここで選択・保存します。


「設定 > パーマリンク設定」の設定

SEOを考え、共通設定で「投稿名」がファイルパスになるように選ぶ


余計なページの削除

デフォルトでのサンプルページが出来ているので削除する。
PagesからはSample Page、PostsからはHello World!を選んで、Move to TrashをApplyで削除。


Google Analyticsタグの設定

https://analytics.google.com/analytics/web/
からトラッキングコードをコピーして持ってくる。
Analyticsのコードは、Google Analyticsの管理画面に行って、
プロパティ>トラッキング情報>トラッキングコード
で得る事ができます。

それからWordPressの
設定 > Header Footer HTML
に行って(Simple Header Footer Pluginがインストールされている事前提)、Headerのどちらかの入力欄にトラッキングコードを挿入する。

自分の場合は、直接Google Analyticsのトラッキングコードを入れるのではなく、Google Tag Managerという、コード管理ツールを通じて呼び出すようにしていますが

上級者向けなので、初心者の方は直接Google Analyticsのトラッキングコードを埋め込むで良いでしょう。


WordPressの役立ちプラグイン

公式のWordPressプラグインリストから自分の用途に合いそうなプラグインを検索してインストールしていく事になります。
インストールしたら、Activateする事で使えるようになります。
プラグインによってはそこから更なる設定が必要になったりするので、Activateしたらそのプラグインの設定画面も確認してみましょう。

自分は以下のようなプラグインを使っているので、参考にしてみて下さい。


サイト移転

ファイルExport/Importで移転できる: All-in-One WP Migration

https://wordpress.org/plugins/all-in-one-wp-migration/
WPのデータベースの中身の異なるドメイン等のサーバー間の移動に使えます。
とはいえ、自分で色々変更できるサーバーはともかく、ファイルサイズ等レンタルサーバーでは諸々制限で動かない事も。
レンサバの場合は、WordPress移行系サービスの出来の違いがポイントになります。
但し、実際に使ってみないと、謳い文句のように簡単に移行できるかどうかは分からないので、試用期間中に作業を終えるように注意。


エディター・コンテンツ生成補助系

旧エディターの作動再現: Classic Editor

https://wordpress.org/plugins/classic-editor/
新エディターに慣れれない&整合性が維持できない&コードを簡単に直接書きたいという方向け
使う事も使わない事も出来るので、インストールして有効にしても問題ない。


記事のコピーを作る: Duplicate Post

https://wordpress.org/plugins/duplicate-post/
ある記事をベースにに別の記事を作るのに使う


ショートコードでHTML/PHPの共通埋め込み: Post Snippets

https://ja.wordpress.org/plugins/post-snippets/
「…….」
というHTMLコードを管理画面で登録する事で、
[code1]
と書くだけで埋め込むことが出来る。
同じ事を別ページで書く時に活用でき、HP作りの「部品化」の一助になる。


著者情報を表示: Simple Author Box

https://wordpress.org/plugins/simple-author-box/
各記事の下への著者情報掲載


プログラムのコード表示: SyntaxHighlighter Evolved

https://ja.wordpress.org/plugins/syntaxhighlighter/
プログラムのコードを行番号付きで表示できる。
他プラグインだと中身によっては適切に表示できなかったが、これは問題なかったので、このプラグインを選択


見出しメニューの自動生成: Table of Contents Plus

https://ja.wordpress.org/plugins/table-of-contents-plus/
Hタグから自動的にメニューリスト&ページ内移動リンクを作ってくれる


Header、Footer部分へのコード挿入: Simple Header Footer HTML

https://wordpress.org/plugins/simple-header-footer-html/
全ページの開始(headタグ内)・終了部分(body閉じ前)に任意のコードを挿入できる


投稿できるファイルタイプの拡張: WP Extra File Types

https://wordpress.org/plugins/wp-extra-file-types/
xlsとかがWordPressではメディアファイルとして添付投稿しようとすると、セキュリティの問題でと出てアップロードできなかったりしますが、これを使うとその制限を緩める事が出来ます。
なお、デフォルトではxlsが表示されていませんが、チェックボックスをチェックすると表示される。


管理画面強化

更新日付の表示: Show modified Date in admin lists

Show modified Date in admin lists
管理画面の投稿記事リストには作成日は表示されますが、更新日は表示されません。
このプラグインを入れる事で、更新日の追加表示を行う事ができます。


日本語対応

WP Multibyte Patch

https://wordpress.org/plugins/wp-multibyte-patch/
WPの日本語に対する挙動で問題がある点を修正してくれる。
特にアップロードするファイルにマルチバイトが含まれてる時に、それをマルチバイトでないファイル名に変更してくれるのは、サイト移転プラグイン等、マルチバイトのファイルに対して問題解決してくれるので、目に見えないがとても役に立つ。


多言語化

Polylang

https://wordpress.org/plugins/polylang/
Wordpressの同じ記事について、別の言語に翻訳して管理する時に役立ちます。
一つ記事を書いたら、プラスボタンを押す事で、記事に紐付ける形で他の言語の記事を書けます。


画像圧縮系

Compress JPEG & PNG images

https://wordpress.org/plugins/tiny-compress-images/
アップロードする画像を最適化してくれ、ファイルサイズを小さくしてくれる


比較/利用の上で却下プラグイン

Shortpixel Image Optimiser: 管理画面のデザインをエラーで崩した


速度向上系Plugin

Autoptimize

https://wordpress.org/plugins/autoptimize/
複数のファイルをまとめてリクエスト数を減らしたり、空白等影響ない文字消してサイズ圧縮してくれる。

Google Page Speed Insights
での点数上げに活用できる。

また、WordPressのテーマにはGoogle Fontsが含まれている事も多いかと思いますが、それが点数を下げる大きな要因になっている事もあります。
その場合は、AutoptimizeのExtraタブからGoogle Fontsをオフにする事も出来ます。
デザインを取るか速度を取るかはそのサイトの性質次第ですが、速度を取る場合には、有効な機能です。

CSS、HTMLの最適化は、大概問題ないですが、JavaScriptの最適化は、問題が起きる事があります。
自分のサイトの場合は、ブラウザーがフリーズする状態になってしまうので、JavaScriptの最適化機能は使っていません。

それでも大きなGoogle Page Speed Insightsの得点向上をもたらしてくれます。

尚、Cache Enablerと役割分担して、Cache Enablerにキャッシュの方は任せられるとの事でしたが、Cache Enablerをオンにしても点数が有意に上がったという形にはならなかったので、Cache Enabler Pluginは使わず、Autoptimizeプラグインだけ自分は使っています。

自分のAutoptimizeの設定例


フォーム系

Contact Form 7

https://ja.wordpress.org/plugins/contact-form-7/
フォーム機能を実現する定番プラグイン
スパム申込を避ける為、Contact > Integration > reCAPTCHAで、Site KeyとSecret Keyを設定して、スパム投稿防止対策をした方が良い


Contact Form CFDB7

https://ja.wordpress.org/plugins/contact-form-cfdb7/
Contact Form 7経由で申し込まれたデータを、専用のテーブルに保存出来る。
そうでないとPost用テーブルに保存され、DBの中身としては滅茶苦茶になってしまうので。


CookieMonster

https://ja.wordpress.org/plugins/cookiemonster/
Cookieの値を埋め込めるようになる。
広告経由等でユーザを誘導した場合、この機能を使って経路情報をCookieに保存していた場合、この機能を使って成果と経路を結びつける事ができる。
上級者向けの機能


セキュリティ系

WPS Hide Login

https://ja.wordpress.org/plugins/wps-hide-login/
WordPressの管理画面のログインページがデフォルトのままにしておくのは、自動的にアタックされ最大のセキュリティホールになりますが、ログインページのURLを任意のURLに変更する事が出来ます。

プラグインをインストール・有効化してから管理画面で
設定 > 一般
と移動して、そのページの下部で自分だけへの秘密のログインURLを設定する。


Disable Author Pages

https://wordpress.org/plugins/disable-author-pages/
ID漏れとかでセキュリティホールになり易いAuthor Pageの機能をオフにする。
これをしていデフォルトのWordPressだと
ワードプレスのルートURLに
/?author=1
と付けると
最初のユーザーのIDが含まれたURLに飛ぶ=管理者のログインIDが漏れる
というセキュリティ問題が簡単に発生する。

その上で、WordPressのログインURLを変えてなければ、パスワードをランダムに変えてログインを試みるブルートゥース攻撃でパスワード防御を破られ、WordPressを乗っ取られる。

これがWordPressの攻撃の王道になっている。


Disable Comments

https://ja.wordpress.org/plugins/disable-comments/
コメントスパムとかばかりだしそもそも使わないしという事でコメント機能は止めたい、というケースに役立つ。


Disable Rest API

https://ja.wordpress.org/plugins/disable-json-api/
REST APIなんて使わないし、という場合に、セキュリティホールとなる可能性を消す為に、REST APIを無効にするプラグイン


Disable XML RPC

https://ja.wordpress.org/plugins/disable-xml-rpc/
XML RPCなんて使わないし、という場合に、セキュリティホールとなる可能性を消す為に、XML RPCを無効にするプラグイン


iThemes Security

https://wordpress.org/plugins/better-wp-security/
WordPressのセキュリティの底上げに使う


Simple History

https://wordpress.org/plugins/simple-history/
WordPress管理画面での操作履歴を記録し、内部監査等に役立てれる


メール系

WP Mail SMTP

https://wordpress.org/plugins/wp-mail-smtp/
WordPressからのメールを、Gmail等のSMTPサーバ経由で送れるようになる。
WordPress自体のインスタンスからのメール送信は正常に作動しない事が多いので、便利なプラグイン


メルマガ系

Newsletter

https://wordpress.org/plugins/newsletter/
メルマガ登録から発行にまで使える


SEO系

メタタグ/Open Graph等設定用: SEO Press

https://ja.wordpress.org/plugins/wp-seopress/
Open Graph、メタタグ、リダイレクトといった設定が出来るようになる。


比較/利用の上で却下プラグイン

The SEO Framework
編集しても結果に反映されないバグに遭遇した為


更新日付表示用: WP Last Modified Info

https://wordpress.org/plugins/wp-last-modified-info/
通常WordPressは記事の作成日が表示されますが、それと併記して更新日の表示が出来る。
Googleは検索結果に、記事の作成日を表示したりするので、更新を重ねている記事が、実態以上に古く見えてしまう事がある。
それを防ぐ為に使っている。
自分は、息の長い記事を作る事が多いというのもあるが、このプラグインをオンにした場合は、WordPressの記事の日付のフォーマットを空にして、更新日の方だけ表示されるようにしている。

なお、テーマによってはうまく作動されない可能性はあり。


自分のサイトに合ったテーマのインストール

https://ja.wordpress.org/themes/
から自分に合うテーマを探して、インストール&カスタマイズ設定をします。

尚、上記公式サイト以外で配布しているテーマもありますが、そうしたものはテストの保障がされないので、基本的には手を出さず、上記公式サイトから見つかるテーマをご使用される事をお勧めします。

また、インストールした後に、使いたいテーマを選んでActivateする必要があります。

テーマ固有のCSSカスタマイズは、テーマにカスタマイズCSS入力欄があるのなら、そこを編集して入力しておきましょう。


WordPressの開発方法: 機能の自力での拡張&その為の便利な技法

WordPressはプラグインで機能を拡張できますが、機能不足の場合、本体やプラグインのソースを弄りたくなってしまうと思います。
但し、可能な限り、それは避けるべきです。
何故なら、自分が編集してしまった第三者のファイルは、第三者がアップデートした時に、それで上書きされる=それを避ける為に、自動アップデートは不可能になってしまう為です。

それよりはPost SnipetsやSimple Header Footerプラグインの設定画面にJavaScript(jQuery/Vue/React等)/CSSを書き、それで解決できる事はJSで解決させて、本体・プラグインのアップデート可を担保した方が良いでしょう。
そのJS自体は別途ソースコードとしてgitのレポジトリの中で管理して、更新したらコピペして管理画面から反映という方法は、かなり無難な運用かと思います。

例えばjQueryの場合

jQuery("$指定エレメント").html("書き換える中身");
jQuery("$指定エレメント").prepend("要素の前に加える中身");
jQuery("$指定エレメント").prepend("要素の後に加える中身");
// 消し去る
jQuery("$指定エレメント").remove();

を駆使する事で、テーマ元々のコードを触らなくても、自由自在に書き換える事が出来ます。

特定のURLだけで条件で処理を発動したい場合は

if(location.href.indexOf("/...../URL.html" >= 0)) {
// 処理
}

とif文で囲めば実現する事が出来ます。

ただ、結果、それなりのJavaScript寄りの技術の発揮を求められる事にはなりますが、アップデートの運用負荷等を考えると、PHPを直接触ってしまうよりかは、結果として楽な運用が出来るでしょう。

CSSの適用は、各記事にCSSを書く事はテキスト入力で可能ですが、サイト全体や複数のサイトで使う場合には、
・利用してるテーマ限定のCSSなら各テーマ付属のCSS入力欄
・Simple Header Footer HTMLプラグインの機能
・Post Snippetの機能
を活用してグローバルなCSSやJSは設定したりすることが出来るので、その機能を上手く活用しましょう。
エンジニアな方の場合には、Post Snippetで読み込むCSS/JSのパスを定義してバージョン制御しつつ、CSSとJS自体はバージョン管理しつつ、サーバーにコマンドでアップするというフローも考えられるかと思います。


最終確認

セキュリティチェック

https://gf.dev/wordpress-security-scanner
は詳しいセキュリティレポートを無料で作ってくれるので、サイトが完成したら走らせてみて、セキュリティの問題がないか確認してみましょう。


速度チェック

ここは値を見ても、どう改善できるかは、手に余るもものかもしれませんが、Googleによるページ速度認識をテストしておきましょう。
Google Page Speed
Googleはページ速度を検索結果の上位表示で考慮するようになっている為、この結果の向上は検索順位の向上(SEO)につながります。

その他関連文章

本格的なWeb開発手法の説明になっていますが
ゼロ(企画)から始めるWebサイト全作成手順
は、Webサイトを作る多くの方にとって、基本から応用迄の視点で役立つかと思いますので、ご参考にして見て頂ければと。