A WordPress theme for WordCamp 2018
このテーマでは、ウィジェットやメニューにこういう指定をするとこうなるという変な仕組みがあります。
W.I.P
このテーマはWordCamp Tokyo 2018のテーマです。
WordCampサイトには以下の制約があります。
- マルチサイトである
- 新たにテーマをインストールすることはできず、既存テーマから選択するだけ
- PHPやJavascriptを追加することは一切できない
- 可能なのはカスタムCSSを読み込むことだけ。このカスタムCSSは外部URLを設定できるので、このGithubリポジトリから読み込むことができます。
詳細については2015, 2016のWeb制作を担当した羽野さんのブログ記事「WordCamp Tokyo 2015のサイトデザインについてのおはなし 」を読んでください。その他、保存版・WordCampサイトの作り方なども参考になります。
ウィジェットに特別なマークアップをすることで、なんらかの素敵なスタイルが設定されます。
テキストウィジェット（1つのみ）を設定することで、かっこいいメインビジュアルが設定されます。HTMLは次のような構造にしてください。
<div class="mv-logo">
<h2>WordCamp Tokyo 2018 Challenge!</h2>
<p>
<time>2018.09.16</time>-<time>2018.09.17</time>
<span>ベルサール新宿グランドカンファレンスセンター5F</span>
</p>
</div>
<a class="button-primary" href="https://2018.tokyo.wordcamp.org">最新情報をチェック</a>
VCCWをクローンしているので、それをダウンロードしてください。
git clone git@github.com:wct2018/vccw.git ./wct2018-vccw
これで、以下の設定が行われます。
- WordPressマルチサイトのインストール
- 必要なプラグインを諸々インストール
- 必要な親テーマをインストール
- このテーマリポジトリをインストールし、有効化
成功すれば、 https://wctokyo2018.local でアクセスします。証明書のエラーは無視してください。
もし失敗した場合は、このリポジトリwct2018/wct2018 にイシューとして登録してください。
このテーマを初期化するにはnpmが必要です。
npm install
npm start
上記のコマンドを入力すると、各種ファイルが書き出され、監視が始まります。
src/scss ディレクトリにSCSSを書き込んでくだたい。componentsおよびtemplatesディレクトリにSCSSを追加すると、勝手に読み込まれます。
サイト全体で使えそうな変数は_variables.scssに、サイト全体で使えまわせそうな部品はcomponentsディレクトリに、サイトのそれぞれのパーツはtemplatesディレクトリにおいてください。
画像はsrc/imagesディレクトリに配置されたものが最適化されてdocs/assets/imagesにコンパイルされます。
多くはCSSの背景画像としての利用だと思われますが、その場合はローカルと本番デプロイでパスが変わるので、必ず次のように記載してください。$img-path変数が文脈によって色々書き換わります。
.main-visual{
background-image: url("#{$img-path}header-logo.png")
}
src/pugディレクトリにあるファイルは distフォルダにHTMLとしてコンパイルされ、BrowserSyncで監視することができます。
npm run server
FontAwesomeを利用するには、外観 > フォントへ移動し、Font Awesomeという項目に次のURLを含めてください。https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
デプロイメントといっても、CSSが変わるだけです。リリースはmasterブランチの docs フォルダにて行います。
コンテンツ（サイドバー、メニュー、ウィジェットなど）の適用とCSSの適用を両方行って初めてコンテンツ公開となるので、できる限りCSSを冗長化させてください。要するに、CSSとコンテンツを同時に更新しないと適用されないのは好ましくないということです。
次のコマンドで、デプロイ用のファイルが書き出されます。
npm run production
本番用のリソースは静的なHTMLとして Github Pages にデプロイされます。
WordCamp用サイトは以下のCSSを参照することで、デザインが適用されます。
https://wct2018.github.io/wct2018/assets/css/style.css
issuesから問題点を報告してください。 もしくは、プルリクエストを送ってください。
GPL 3.0またはそれ以降です。