ホームページの価値を最大化するCMS、WordPress(ワードプレス)。WordPressに関する情報をまとめておりますので是非ご活用ください。P11viewテーマHOMEテーマ保存版・WordCampサイトの作り方WordPressコミュニティの地域イベントWordCampでは、まずサイトを作ることが求められる。WordPressを愛する人なら誰でもそうだろうが、その地域の特色溢れるWordPressサイトを作りたいと思うことだろう。Showcase”というリストの1位になることができる。ここで2018年にむけて腕まくりを始めるのはまだ早い。Tokyoのテーマ開発を行った筆者の経験をシェアしたい。まとめWordCampサイトの制限WordCampサイトはマルチサイトである。あなたがWordCampのサイトを作ることが決まった場合、マルチサイトの制限を受けることになる。テーマ及びプラグインを追加することはできないのだ。プラグインのオン・オフもできないし、もちろん子テーマを利用することもできない。PHPおよびJSは1行も書くことができない。したがって、独自のテーマは次のようにして作ることになる。シリーズといくつかのテーマがある。いうテーマを利用しているが、もうあまり更新されていないので、今後はtwentyシリーズの新しいバージョンなどを利用するのがよいだろう。インストール済みのテーマ。新たに追加することはできない。ポイントは「既存のテーマの構造をほとんど変えずにカスタマイズする」ということ。ある程度自由が効くとはいっても、基本的には同じ構成にすることが望ましい。したがって、WordPressにあまり詳しくないデザイナーが自由にビジュアルを決定してしまうと、苦労することになる。何人でやるにしても、ローカルの開発環境があると助かる。できればVCCWなどの開発環境をチームメンバーで共有しよう。東京の2017年でもまずは開発環境を用意している。世界的にはVVVというものが使われているらしいのだが、公式チュートリアルに従うとメタサイト(makeサイトやドキュメント)もすべて構築することになってしまって大変なので、VCCWを利用している。本家のリポジトリからフォークしてあるが、差分は次の通り。このファイルはサイトの設定をカスタマイズするために必要なため。プラグインのダウンロードなどを行なっている。このファイルは必要なプラグインやテーマをインストールする。それでは、それぞれのファイルについて説明しよう。カスタマイズすることでサイトの初期設定を変更することができる。tagregatorと、上記の行を変更している。プラグインは動作確認のために必須なので、入れておいてほしい。不要になったものがあったら、行を削除すればよい。ついてこちらのファイルはVCCWの実行後に動作するものなのだが、全文をコピーしてしまおう。Reduxテーマをインストール。別のテーマを使う方は不要。wct2017WordCampサイトに使われるプラグインのうちいくつかは公式リポジトリに上がっていないので、SVNから落としている。2017専用テーマもgitからクローンしている。コマンドを叩けば全員が同じ環境を共有できるようにしており、これは非常にうまくいった。テーマの設定さて、次は肝心のテーマである。「外部CSS」を利用する際、読み込み方は2種類ある。元になったテーマにCSSを追加する元のテーマのCSS読み込みを停止し、外部CSSだけを読み込む労力の多寡によって選べばよいが、前者であるなら、JetpackのカスタムCSSでもよいのではないかという気がする。masterブランチのdocsフォルダにすべてのCSSおよび画像をアクセス可能にしている。使った静的サイトの公開方法が、とても簡単になっていた」を参照のこと。これは詳細よりもgulpタスクを見てもらうと早いだろう。と打った場合はdocsフォルダ以下に書き込み、通常のビルドではassetsフォルダ以下に書き込みというフローになっている。ポイントとしては、フラグを用意し、CSSが参照するパスを変えること。経由で書き込まれる(CSSのホストはCampサイトになる)ので、CSSの背景画像指定が切れてしまうのである。したがって、次のように一工夫している。変更になるようにしているというわけだ。CSS内に書いたWebフォントの指定はセキュリティ上の理由からすべて削られるので、それも実際に作業する前に知っておいた方がよいだろう。しないと、あとからWebフォントを導入して「あれ、効かない?」とパニックになる。その他の注意点ウィジェットの数は少ないので、足りないパーツは一生懸命テキストウィジェットで作ることになる。詳細ページではアイキャッチが表示されないテンプレートも存在するので、どうしてもできない場合は割り切ろう。WordPressの知識がないWebデザイナーにHTMLを作ってもらっても苦労することが多いので、事前によく同意を形成しておこう。タイムテーブルなどの多くはショートコードで出力され、そのHTMLを変更する余地は一切ない。CampTixのページ(チケット申し込み、決済完了画面、チケット詳細画面)は実際に試さないと確認することができないので、「デザインが当たらない」という事態が起きてしまいがちだ。細部までこだわるのであれば、こうしたページもちゃんと見ておこう。わぷーや衛星が動いているのは擬似要素やCSSアニメーションを利用している。別に動かなくてもいいのだが、やりたければこちらをご参考いただきたい。wct2017のREADMEが非常によくできているので(書いたのは筆者なのだが)、興味がある方はぜひご一読いただきたい。まとめWordCampサイトをおしゃれに作るにはかなりハードルが高いのだが、多くの人の目に触れるサイトであると同時に、名前を売るチャンスでもある。我こそはと思うデザイナーはぜひ挑戦してほしい。最初に表示されました。ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。