各VPSの設定

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

目次

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

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

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

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

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

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


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

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


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

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

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

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

どのVPSが良いかは、VPS性能比較表お勧めVPS選択フローチャート、そしてそれぞれのVPSの特徴解説ページを見て決めて頂ければと。

AWS Lightsail WordPressアイコンをクリックしてインスタンス作成
ConoHa アプリケーションタブをクリックして「かんたんKUSANAGI」を選べば良い。但しメモリ1GB以上のインスタンスでないと選べない
DigitalOcean Marketplaceタブをクリックし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)」の設定

・”Just another WordPress site”という値が入っているキャッチライン(Tagline)の部分はは空にする
・TimezoneをUTC+0からUTC+9に変更する(日本の時間)
・Dateformatを2019-01-04の形式に変更
・Timeformatを6:42 AMの形式に変更
して保存


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

Pingの送り先に
https://ping.minakoe.jp/ping/xmlrpc.asp
を追加


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

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


「設定 > パーマリンク(Settings > Pemalink)の設定」の設定

SEOを考え、共通設定で投稿名を選ぶ


Google Analyticsタグの設定

https://analytics.google.com/analytics/web/
からトラッキングコードをコピーして持ってきて、

設定 > Header Footer HTML

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


余計なページの削除

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


役立ちプラグインのインストール

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

以下のプラグインはどのサービスにでも役立つ局面があるでしょう。


All-in-One WP Migration

https://wordpress.org/plugins/all-in-one-wp-migration/
WPのデータベースの中身の異なるドメイン等のサーバー間の移動に使えます。


Classic Editor

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


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に保存していた場合、この機能を使って成果と経路を結びつける事ができる。
上級者向けの機能


Disable Author Pages

https://wordpress.org/plugins/disable-author-pages/
ID漏れとかでセキュリティホールになり易いAuthor Pageの機能をオフにする。


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を無効にするプラグイン


Duplicate Post

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


iThemes Security

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


Newsletter

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


Polylang

https://wordpress.org/plugins/polylang/
Wordpressの同じ記事について、別の言語に翻訳して管理する時に役立ちます。


Post Snippets

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


Shortpixel Image Optimiser

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


Show modified Date in admin lists

https://ja.wordpress.org/plugins/show-modified-date-in-admin-lists/
管理画面の投稿記事リストには作成日は表示されますが、更新日は表示されません。
このプラグインを入れる事で、更新日の追加表示を行う事ができます。


Simple Author Box

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


Simple Header Footer HTML

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


Simple History

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


SyntaxHighlighter Evolved

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


Table of Contents Plus

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


The SEO Framework

https://wordpress.org/plugins/autodescription/
Open Graph、メタタグといった設定が出来るようになる。


WP Mail SMTP

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


WPS Hide Login

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


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

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
は詳しいセキュリティレポートを無料で作ってくれるので、サイトが完成したら走らせてみて、セキュリティの問題がないか確認してみましょう。