WordPress + Cocoon on Ubuntu

WordPressは、個人のブログから大規模なサイトまで作ることができるオープンソースのコンテンツ管理システム(以下 CMS)です。現在、全世界の40%以上のサイトがWordPressを利用しており、CMSのシェアでは全世界の60%以上、日本国内のシェアでは80%以上のサイトがWordPressを利用しており圧倒的なシェアを持っています。WordPressは、HTML、PHP、MariaDB(or MySQL)を使用していますが、多くのホスティングサービス・レンタルサーバーの会社では、WordPressを簡単に導入できるツールを提供しており、言語やサーバ運用の詳しい知識無しで運用出来るツールなどを提供しているので多くの会社、ブロガー、アフリエイターなどが使用しています。
しかしちょっと家の中で試してみたいというならUbuntuがあれば外部のサービスを利用する必要はありません、Webサーバ、php、MariaDB、そしてWordPressをインストールすれば自分のディスクトップパソコンにもWordPressのサイトを設置出来ます。
本稿では、WordPressのインストールから、テーマの変更、拡張機能を追加して、オリジナルのサイトを構築する手順を紹介したいと思います。手元にあるので、カスタマイズして壊しても、簡単に削除して再インストールが出来るので、本誌読者であればトライアンドエラーを繰り返し、カスタマイズ方法を学習して仕事に役立てて頂きたいと思います。

WordPressに必要なパッケージをインストールします。Webサーバは何を使用しても良いですがApacheを、データベースはMariaDBを今回は使用したいと思います。

$ sudo apt install apache2 php php-mysql php-curl php-gd php-mbstring php-xml php-xmlrpc php-soap php-intl php-zip mariadb-server

WordPressは管理画面から容量が大きいファイルをアップロードする機会が多くあります。phpのデフォルトの設定では容量が少ないので適宜増やしておきます。

/etc/php/7.4/apache2/php.ini

post_max_size = 8M
     ↓
post_max_size = 50M

upload_max_filesize = 2M
     ↓
upload_max_filesize = 50M

設定変更後、apacheを再起動します。

$ sudo systemctl restart apache2

マシン起動時に、常時Apacheを起動したい場合は以下のコマンドを実行します。

$ sudo systemctl enable apache2

MariaDBにWordPressのデータベースとアクセスするユーザを作成します。

※1
$ sudo mysql -u root
MariaDB [(none)]> CREATE DATABASE wordpressDB DEFAULT CHARACTER SET utf8;
Query OK, 1 row affected (0.000 sec)
MariaDB [(none)]> GRANT ALL PRIVILEGES ON wordpressDB.* TO wordpressUser@localhost IDENTIFIED BY 'password';
Query OK, 0 rows affected (0.001 sec)
MariaDB [(none)]> exit
Bye

例は以下の設定値を使用していますが、各自で適宜に任意の値を設定してください。
データベース名: wordpressDB
ユーザ名: wordpressUser
パスワード: password

最新のWordPressをダウンロードしてApacheのドキュメントルートに置いて、配下の全てのファイルのオーナーとグループをApacheと同じwww-dataに変更します。

※2
$ wget https://ja.wordpress.org/latest-ja.tar.gz
$ tar xvfz latest-ja.tar.gz
$ sudo rm -rf /var/www/html/
$ sudo mv wordpress/ /var/www/html/
$ sudo chown -R www-data:www-data /var/www/html/

もしもう一度最初から行いたい場合は、データベースとドキュメントルートを削除して、※1,2の手順を行えば良いのでトライアンドエラーを繰り返してカスタマイズしてみて下さい。

$ sudo mysql -u root
MariaDB [(none)]> DROP DATABASE wordpressDB;
Query OK, 12 rows affected (0.460 sec)
MariaDB [(none)]> exit
Bye
$ sudo rm -rf /var/www/html/

WordPressにアクセスする準備が完了したので、ブラウザに設置マシンのIPアドレス(http://localhost/、http://IPアドレス/ )を入力してアクセするとセットアップウィザードの画面が表示されるので「さあ、始めましょう！」をクリックします。

WordPressがMariaDBにアクセスする設定画面がでるので、先程設定したデータベース名、ユーザ名、パスワードを設定します。データベースのホスト名とテーブルの接頭辞は、デフォルトのままで「送信」をクリックします。

データベース名: wordpressDB
ユーザ名: wordpressUser
パスワード: password
データベースのホスト名: localhost
テーブルの接頭辞: wp_

最後にWordPressの管理画面にアクセスするユーザとサイトのタイトルを設定します。「検索エンジンでの表示」にチェックを入れると検索エンジンにインデックスされるので、検索結果にWordPressの記事が表示されるようになります。ローカルネットワーク内で立ち上げる場合は、特に関係ない設定項目になります。

サイトのタイトル: 任意
ユーザ名: 任意
パスワード: 任意
メールアドレス: 任意
検索エンジンでの表示: 任意

初期設定が完了したので「ログイン」をクリックして、WordPressの管理画面にアクセスします。今後サイトのトップはホームページになるので、次回ログインする際は、http://IPアドレス/wp-login.phpよりログインします。ログイン時に「更新」メニューに更新の通知が来ている場合は、「更新」メニューを表示してアップデートを行います。WordPress本体、これから紹介するテーマ、プラグインなどは全てここから更新可能なので、今後ログイン時に更新の通知に気づいたら更新を行います。

まずは、画面左上の「サイトを表示」より現在のサイトのデザインを見てみます。デフォルト設定なのでとてもシンプルなデザインになっています。管理画面に戻る場合は、同じように画面左上の「ダッシュボード」より戻ります。ページのデザインを大きく左右するのは「テーマ」の選択です。テーマは、「外観」->「テーマ」よりテーマの変更を行います。デフォルトでは、以下の３つのテーマがイントールされており、今なら2021(Twenty Twenty-One)年版が選択されています。各テーマの「有効化」ボタンをクリックするだけで、ページのテーマが変更されます。デフォルトのテーマでもカスタマイズすれば個性的なページを作成することができますが、今回は外部のテーマをインストールする方法を紹介します。

Twenty Nineteen
Twenty Twenty
Twenty Twenty-One

「新しいテーマを追加」ボタンをクリックするとテーマの4000以上のテーマが表示されて、気に入ったデザインをインストールできます。しかしここで表示されるテーマは、設定メニューが英語のものが大半なのでWordPress初心者には設定に戸惑うかもしれません。テーマの大半は無料で提供されていますが、テーマによっては追加機能が有料になっている場合があります。

日本では日本人が作った設定が日本語化されているテーマが人気で、多くの人がテーマ個別のページよりテーマをダウンロードして利用しています。無料で人気のテーマをいくつか紹介しておきます。各ページを参照して気に入ったデザインを見つけてみて下さい。今回は、おそらく国内の無料テーマでは一番人気のCocoonをインストールします。
Cocoonは、シンプルなのにカスタマイズしやすく、パソコン、スマフォ、タブレットでもデザインが崩れないように完全なレスポンシブスタイル対応、個人専用で使う場合は関係ありませんが、SEO(Search Engine Optimization 検索エンジン最適化)機能も保有しています。この後、プラグインについて紹介しますがプラグインを沢山インストールするとサイトが重くなったり、プラグイン同士がバッティングを起こしてうまく動作しなくなる事もあります。いろいろカスタマイズしたい場合は、出来る限り機能な豊富なテーマをインストールして最小限のプラグインをインストールするのがサイトを軽くするコツです。

Cocoon（コクーン）https://wp-cocoon.com/
Luxeritas(ルクセリタス) https://thk.kanzae.net/wp/
Lightning（ライトニング）https://lightning.vektor-inc.co.jp/
Xeory Extension（セオリーエクステンション）https://xeory.jp/template/xeory-extension/

Cocoonのダウンロードは、https://wp-cocoon.com/downloads/より行います。WordPressのテーマには通常のテーマ(親テーマ)とは別に子(child)テーマがあります。通常はテーマのみをインストールします。テーマのコードを直に修正してカスタマイズしたい場合は、自分で子テーマを作成して子テーマを編集します。これはテーマ自体をカスタマイズすると、テーマアップデート時に、カスタマイズした差分をポーティングする手間を省くための回避策です。Cocoonは、親テーマの他に子テーマが既に用意されおり、両方インストールします。執筆時のバージョンは親テーマ 2.3.7.1、子テーマ 1.1.3 をダウンロードしました。

管理画面の「外観」->「テーマ」->「新しいテーマを追加」->「テーマのアップロード」よりダウンロードしたファイルをアップロードします。「テーマ」画面に戻るとCocoonのテーマが表示されているので、親テーマではなく、子テーマを「有効化」します。

ページのカスタマイズは、「外観」->「カスタマイズ」より行いますが、Cocoonをインストールするとメニューに「Cocoon設定」が現れるので、変更はこちらより行います。まずはサイトの雰囲気を決めるため「スキン」タブよりスキンを変更します。スキンの名前にマウスを合わせるとサイトのイメージが浮かび上がるので気に入ったデザインを選択します。サイトのイメージを大きく左右するのは、サイトの背景色やトップにくる画像です。「全体」タブでサイト全体のフォント、イメージカラー、「トップ」タブでヘッダーのサイズ、ロゴ、背景画像などを変更します。私は「スキン」タブで「COLORS（ブラック）」、「全体」で「サイト背景色」、「ヘッダー」で「ヘッダーロゴ」より画像をアップロード、「キャッチフレーズの配置」を「表示しない」の設定をしました。ここでサイトを表示してみます。たった４つの設定を変更しただけで、デフォルトのサイトよりオリジナルティがでてきました。

サイトへの書き込みは、WordPressの管理画面の「固定ページ」か「投稿」から行います。「固定ページ」は、ホーム、サイトの概要、問い合わせページなど、「投稿」は、ブログ記事を書く時に使います。

                     |投稿  |固定ページ
--------------------------------------------------
一覧ページの自動作成 | ○   | ☓
タグ、カテゴリー     | ○   | ☓
ページの親子関係     | ☓    | ○
--------------------------------------------------

運用方法的には、固定ページはサイトのメインになる内容を書き込み必要に応じて随時更新し、投稿ページは、新しい投稿をどんどん書き込んでいきます。個人でブログを投稿するなら、「投稿」だけを使用すれば良いでしょう。WordPressの管理画面の「投稿」->「新規追加」をクリックするとGutenburg(グーテンベルク)というWordPress特有のブロックエディタが表示されます。Gutenbergは、2018年12月 WordPress 5.0へのバージョンアップから採用された新しいエディターです。以前はWordのようなエディターで記事を書き、必要に応じてHTMLを修正するようなエディターでしたが、ブロックエディタは、投稿を構成する各コンテンツ（テキストや画像など）を「ブロック」という単位で作成していくのが特徴です。「＋」ボタンをクリックして挿入するブロッグを選択します。まずはタイトルを決めて「段落」に文章を書いてみます。その他、SNSへのリンクや引用など、多くのブロックが用意されているので挿入して試して下さい。書き終わったら右のメニューにある「カテゴリー」よりカテゴリーを追加します。投稿にカテゴリーを紐づけて置くと、カテゴリー一覧より投稿を探せるようになり後で見返しやすいです。「アイキャッチ画像」は、投稿のメインとなる画像を設定します。投稿に目を止めてもらうための重要な画像です。その他の使用方法については、https://ja.wordpress.org/support/article/wordpress-editor/ を参照して下さい。
Gutenburgは、慣れれば使いやすいエディターですが、革新的な改修であったため古くからユーザには不評でした。Cocoon設定の「エディター」タグの「Gutenbergエディターを有効にする」のチェックを外すと旧エディターのモードになるので、使いにくい感じた人はこちらを利用するのも良いでしょう。

旧エディター

WordPressに多くの機能を追加したい場合は、プラグインをインストールします。プラグインは、管理画面の「プラグイン」より行います。「新規追加」をクリックすると利用可能なプラグインが5万以上表示されます。沢山インストールしたくなりますが、Cocoonには人気のプラグイン相当の機能が既に含まれているため「WordPress プラグインお勧め」などと検索して紹介されているプラグインの機能はCocoon自体が持っている可能性があります。多くのプラグインを使用すると、サイトが重くなるので厳選してインストールしましょう。その中でお勧めしたいのがバックアップツールです。UpdraftPlus WordPress Backup Plugin は、WordPressのデータを簡単にバックアップ、復元できるツールです。「プラグインの検索」より「UpdraftPlus」と入力して検索して「今すぐインストール」をクリックしてインストールします。プラグインの一覧画面に戻るとUpdraftPlusが追加されるので「有効化」ボタンをクリックして有効化すると「設定」ボタンが現れるのでクリックして設定画面を開き「今すぐバックアップ」をクリックするだけでバックアップ完了です。バックアップ対象は、最初に作成した、WordPressのデータベース、テーマ、プラグインです。投稿を間違って削除した場合はデータベースを、テーマ、プラグインのアップデート時に動作がおかしくなったらそれぞれのデータをリストアすれば良いでしょう。なおプラグインのメニューに「設定」ボタンが現れないプラグインもありますが、WordPress管理画面の「設定」からも行えます。

その他のお勧めのプラグイン

EWWW Image Optimizer は、画像を自動で圧縮してくれるプラグインです。インストールして有効化するだけでアップロードした画像は自動で圧縮されるので、HDDの容量は節約出来ますし、ページの表示速度も改善されます。Googleが開発している圧縮率の高い非可逆圧縮のWebP（ウェッピー）変換にも対応しています。

WP Multibyte Patch は、WordPressの日本語化を補助してくれるプラグインです。有効化しておくだけで文字化けを防止してくれたり、全角スペースでの検索が可能なったり、絵文字を含む日本語の文字数を正確にカウントしてくれるようになります。

その他、家の中で使う場合は必要ありませんが、殆どのWordPressを使ったサイトで利用されているプラグインを紹介したいと思います。
Contact Form 7 は、サイトのお問い合わせフォーム用のプラグインです。ウェブサーフィンをしていると、弊社へのお問い合わせはこちらからというページをよくみますが、多くのサイトでこのプラグインが利用されています。

Google XML Sitemapsは、Googleサーチコンソールにクローラーロボット用のXMLサイトマップを送信するためのプラグインです。サーチコンソールにXMLサイトマップを送信することで、Google検索のクローラーが巡回しやすくなり、検索エンジンにインデックス(登録)されやすくなります。多くの読者を集めたい人はインストール必須のプラグインです。XMLサイトマップを作成してくれる類似プラグインが沢山あるので、気に入ったものをインストールすると良いでしょう。

メインページや問い合わせページを作成して、ある程度投稿が溜まってきて、凝ったサイトを作りたいならメニューボタンは必須でしょう。メニューはWordPress「外観」->「メニュー」より行います。任意の「メニュー名」を設定して、固定ページ、投稿からメニューボタンに割り当てるページを設定します。投稿一覧のメニューとページを作りたい場合は、固定ページに、投稿記事一覧というタイトルの空ページを作成して、WordPressの管理画面の「設定」->「表示設定」の「投稿ページ」で「投稿記事一覧」を選べば良いだけです。