保存版・WordCampサイトの作り方 – Capital P

WordPressコミュニティの地域イベントWordCampでは、まずサイトを作ることが求められる。WordPressを愛する人なら誰でもそうだろうが、その地域の特色溢れるWordPressサイトを作りたいと思うことだろう。

がんばれば WordCamp Tokyo 2014 のように、”Best WordCamp Websites of 2014 Showcase”というリストの1位になることができる。また、今年の WordCamp Kyoto 2017 もかなり出色の出来だったので、Capital Pで取り上げた。

しかし、ここで2018年にむけて腕まくりを始めるのはまだ早い。その前に知っておくべきことがいくつかあるので、直近2回に渡りWordCamp Tokyoのテーマ開発を行った筆者の経験をシェアしたい。

WordCampサイトの制限

WordCampサイトはマルチサイトである。つまり、あなたがWordCampのサイトを作ることが決まった場合、マルチサイトの制限を受けることになる。テーマ及びプラグインを追加することはできないのだ。さらに、プラグインのオン・オフもできないし、もちろん子テーマを利用することもできない。PHPおよびJSは1行も書くことができない。

したがって、独自のテーマは次のようにして作ることになる。

外部CSSという機能を用い、外部のスタイルシートを参照する
フォントは Typekit, Google Web Fonts, FontAwesome, Dashicons を利用することができる
ヘッダー画像、アイコンなどに関してはテーマカスタマイザーを利用する

利用できるテーマは twenty* シリーズといくつかのテーマがある。東京ではなんとなく Redux というテーマを利用しているが、もうあまり更新されていないので、今後はtwentyシリーズの新しいバージョンなどを利用するのがよいだろう。

ポイントは「既存のテーマの構造をほとんど変えずにカスタマイズする」ということ。ある程度自由が効くとはいっても、基本的には同じ構成にすることが望ましい。

したがって、WordPressにあまり詳しくないデザイナーが自由にビジュアルを決定してしまうと、苦労することになる。

開発環境の構築

何人でやるにしても、ローカルの開発環境があると助かる。できればVCCWなどの開発環境をチームメンバーで共有しよう。

東京の2017年でもまずは開発環境を用意している。世界的にはVVVというものが使われているらしいのだが、公式チュートリアルに従うとメタサイト（makeサイトやドキュメント）もすべて構築することになってしまって大変なので、VCCWを利用している。

私たち2017年度のTokyo Web制作班が使ったのが、こちらのリポジトリ wctokyo2017/vccw である。本家のリポジトリからフォークしてあるが、差分は次の通り。

.gitignore（無視リスト）から site.yml と provision-post.sh を除去。このファイルはサイトの設定をカスタマイズするために必要なため。
site.yml を追加。プラグインのダウンロードなどを行なっている。
provision-post.sh を追加。このファイルは必要なプラグインやテーマをインストールする。

それでは、それぞれのファイルについて説明しよう。

site.yml について

site.ymlは vccwに含まれているサイト設定用のファイルで、 provision/default.yml をカスタマイズすることでサイトの初期設定を変更することができる。詳しくはファイルを見ていただきたいのだが……

#
# Network Settings
#
hostname: wctokyo2017.dev

#
# WordPress Default Plugins
# Plugin's slug or url to the plugin's slug.
#
plugins:
  - akismet
  - camptix-pagseguro
  - camptix-payfast-gateway
  - jetpack
  - json-rest-api
  - wp-multibyte-patch
  - wordpress-importer
  - tagregator

と、上記の行を変更している。とりわけ、プラグインは動作確認のために必須なので、入れておいてほしい。もし不要になったものがあったら、行を削除すればよい。

provision-post.sh について

こちらのファイルはVCCWの実行後に動作するものなのだが、全文をコピーしてしまおう。

#!/usr/bin/env bash

set -ex

cd /var/www/html

# Campサイトで使われるmu-pluginsをダウンロード
if [ ! -e /var/www/html/wp-content/plugins/mu-plugins ]; then
  svn co https://meta.svn.wordpress.org/sites/trunk/wordcamp.org/public_html/wp-content/mu-plugins/ /var/www/html/wp-content/mu-plugins
fi


# 公式に上がっているプラグインをダウンロード（重複ありかも）
SVN_PLUGINS=( camptix-network-tools email-post-changes tagregator )

for i in "${SVN_PLUGINS[@]}"
do :
  if [ ! -e /var/www/html/wp-content/plugins/$i ]; then
    svn co https://plugins.svn.wordpress.org/$i/trunk /var/www/html/wp-content/plugins/$i
  fi;
  wp plugin activate $i
done

# Camptixをインストール（重要！）
if [ ! -e /var/www/html/wp-content/plugins/camptix ]; then
  git clone https://github.com/Automattic/camptix.git /var/www/html/wp-content/plugins/camptix
fi
wp plugin activate camptix

# Reduxテーマをインストール。別のテーマを使う方は不要。
if [ ! -e /var/www/html/wp-content/themes/wordcamp-base-v2 ]; then
  svn co https://meta.svn.wordpress.org/sites/trunk/wordcamp.org/public_html/wp-content/themes/wordcamp-base-v2/ /var/www/html/wp-content/themes/wordcamp-base-v2
fi

# wct2017 テーマをインストール
if [ ! -e /var/www/html/wp-content/themes/wct2017 ]; then
  git clone https://github.com/wctokyo2017/wct2017.git /var/www/html/wp-content/themes/wct2017
fi
wp theme activate wct2017

WordCampサイトに使われるプラグインのうちいくつかは公式リポジトリに上がっていないので、SVNから落としている。

また、wct2017というWordCamp Tokyo 2017専用テーマもgitからクローンしている。

とにかく、この設定を共有し、 vagrant up コマンドを叩けば全員が同じ環境を共有できるようにしており、これは非常にうまくいった。

テーマの設定

さて、次は肝心のテーマである。「外部CSS」を利用する際、読み込み方は2種類ある。

元になったテーマにCSSを追加する
元のテーマのCSS読み込みを停止し、外部CSSだけを読み込む

労力の多寡によって選べばよいが、前者であるなら、JetpackのカスタムCSSでもよいのではないかという気がする。

さて、肝心の外部テーマだが、東京チームではgithub ページ機能を利用し、 masterブランチのdocsフォルダにすべてのCSSおよび画像をアクセス可能にしている。この仕組みについての詳細はこちらの記事「GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた」を参照のこと。

これは詳細よりもgulpタスクを見てもらうと早いだろう。

gulp.task('deploy', function() {
  deployFlg = true;
  runSequence( 'pug', 'sass', 'image-min', 'copyFont', function() {
    deployFlg = false;
    console.log( 'Deploy Done. Push them to origin/master!' );
  });
});

デプロイ用コマンドを用意し、npm run deploy と打った場合はdocsフォルダ以下に書き込み、通常のビルドではassetsフォルダ以下に書き込みというフローになっている。

ポイントとしては、フラグを用意し、CSSが参照するパスを変えること。なぜかというと、WordCampサイトのCSS読み込みはheadタグに直接書き込まれるのではなく、WordPressのadmin-ajax.php 経由で書き込まれる（CSSのホストはCampサイトになる）ので、CSSの背景画像指定が切れてしまうのである。

したがって、次のように一工夫している。

$img-path: "../images/" !default;
@if($env == 'production') {
  $img-path: "//wctokyo2017.github.io/wct2017/assets/images/";
}

デプロイファイル書き出しのときは $img-path が変更になるようにしているというわけだ。

また、CSS内に書いたWebフォントの指定はセキュリティ上の理由からすべて削られるので、それも実際に作業する前に知っておいた方がよいだろう。そうしないと、あとからWebフォントを導入して「あれ、効かない？」とパニックになる。

その他の注意点

ウィジェットの数は少ないので、足りないパーツは一生懸命テキストウィジェットで作ることになる。
詳細ページではアイキャッチが表示されないテンプレートも存在するので、どうしてもできない場合は割り切ろう。
WordPressの知識がないWebデザイナーにHTMLを作ってもらっても苦労することが多いので、事前によく同意を形成しておこう。
タイムテーブルなどの多くはショートコードで出力され、そのHTMLを変更する余地は一切ない。覚悟しよう。
CampTixのページ（チケット申し込み、決済完了画面、チケット詳細画面）は実際に試さないと確認することができないので、「デザインが当たらない」という事態が起きてしまいがちだ。細部までこだわるのであれば、こうしたページもちゃんと見ておこう。
わぷーや衛星が動いているのは擬似要素やCSSアニメーションを利用している。別に動かなくてもいいのだが、やりたければこちらをご参考いただきたい。

wct2017のREADMEが非常によくできているので（書いたのは筆者なのだが）、興味がある方はぜひご一読いただきたい。