wct2019 / website Goto Github PK

View Code? Open in Web Editor NEW

1.0 5.0 1.0 293 KB

wordcamp tokyo 2019の公式サイトのためのリポジトリです。

License: GNU General Public License v3.0

CSS 100.00%

website's Introduction

WordCampサイト用の外部cssファイルを保存するリポジトリ

ローカルでの開発環境の作成手順

1.Local by Flywheelをインストールしてローカル上にWPサイトを構築

https://localbyflywheel.com

2.WordCampサイト用のプラグインを入れる

リポジトリにアクセスして、zip形式でファイルをダウロード
https://github.com/WordPress/wordcamp.org/
下記プラグインを手動でコピーしインストール、有効化(メニュー表記が英語になってしまうけど大丈夫です) public_html/wp-content/plugins/wc-post-types/

3.本番サイトから記事データを移植

エクスポートツールでxmlデータをダウンロード。ローカル環境上にインポーターを使って読み込む。

4.リモートリポジトリからクローン

https://github.com/wct2019/website

ツールは何でも良いですが、GitHub Desktopが委員長のおすすめ。
クローンする場所は /wp-content/themes/twentynineteen/直下。

クローンしたら、npmモジュールをインストール

npm install

5.CSSの適用

外観メニュー「テーマエディター」からfunctions.phpの「function twentynineteen_scripts() {〜}」の間に下記コードを記載するとスクリプトが読み込まれる。

function twentynineteen_scripts() {

    //他のスクリプトはそのままで、最後に追記
    wp_enqueue_style( 'wct2019', get_theme_file_uri() . '/website/docs/style.css', ['twentynineteen-style'], wp_get_theme()->get( 'Version' ) );

}

6.cssファイルをビルド

作業中に保存されたら自動的にビルド

npm start

一回だけビルド

npm run build:style

sass/style.scss → docs/style.css にコンパイルされる。
ローカルサイトで、スタイルが反映されていれば、無事に成功！

7.GitHubに作業したファイルをプッシュ

作業ブランチプッシュ
masterにプルリクエスト

豆知識
コミット時にfixes #Issue番号 を入れておくとマージ時にIssueがCloseされる。

生成される外部css

https://wct2019.github.io/website/style.css

その他メモ

ローカルで登壇者の投稿タイプを編集するための追加ファイル

登壇者を追加するときに、新規追加で保存すると画面エラーが出ます。
メールアドレスとユーザー名でプロフィール画像などを取得するための仕組みに必要なファイルを追加する必要があるので、orgのリポジトリよりDLしてmu-pluginsに追加します。

ファイルのリンク https://github.com/WordPress/wordcamp.org/blob/a5dd6e6547c739a020083e7b9db9a603667e86d5/public_html/wp-content/mu-plugins/3-helpers-misc.php

website's People

Contributors

Stargazers

Watchers

Forkers

tkmktkhr

website's Issues

【タイムテーブル】昼休憩後の「SUN」での表記について

実行委員一覧スタイル作成

ショートコード名: organizers

アーカイブページのアーカイブタイトルが微妙すぎるので調整する

参考
https://2019.tokyo.wordcamp.org/author/mimitips/

投稿者アーカイブ等の、投稿者名の部分の余白がめっちゃ空いてて微妙すぎるので調整したい。
以下の様な感じにしたいです。

スポンサー一覧のスタイル作成

スポンサー一覧 [sponsor]のスタイルを作成する。

【タイムテーブル】セッションのジャンル分けについて

セッションに「デザイナー向け」「エンジニア向け」などのカテゴリを付与する？
カテゴリごとに背景色（または背景の柄）を変えておくとタイムラインのイメージが湧きやすい
パンフ、場内の案内ではやるとしてサイト内のタイムテーブルでやるかどうか

トップページの構成を変更

トップページの構成を、現在の新しい投稿を見せるスタイルから専用の固定ページに設定する。
構成は現在思案中。

https://docs.google.com/document/d/1My78UZIlk79yZtQ2XyzpRhvIyGOReSikfkrN4OHg3W0/edit?usp=sharing

【タイムテーブル】「休憩」の背景色

「休憩」は「昼休憩」と同じ背景色にしたい

外部CSSとWordCamp.orgの連携テスト

外部CSS化したファイルを本番サイトに連携テストする。

通知連携確認テスト

スポンサーのロゴの横幅をメインのコンテンツの幅に近づける

全く急ぎませんが、media幅が広めの時に、もし幅がもうちょっと広げられたら、良いかもしれないという話がスポンサーチームMTGで出ましたので一応提案しておきます。ご検討ください。

投稿者のプロフィール詳細が表示されないようにする

@importの記述を削除する

@importはWordCamp.org内で使用できないので、記述を削除する

タイムテーブルのスタイル作成

タイムテーブル[schedule]のスタイル作成。

メニューをサブメニュー化した際のCSS調整

メニューをサブメニューでドロップダウンリストにした場合のCSS調整

【セッション紹介記事】グラバター画像を大きく表示したい

【現状のママ】
https://2019.tokyo.wordcamp.org/2019/09/18/セッション情報第○弾：-今年のwordcamp東京のセッショ/?preview=true

【想定イメージ】

この場合、CSSを

.avatar {
    height: calc(2.25 * 5rem);
    width: calc(2.25 * 5rem);
}

のように上書きしています。

サブメニューの下層メニューの上下センタリング

上下が丁度いい感じになる様に調整したい

実行委員一覧のスタイル作成

実行委員一覧 [organizers]のスタイル作成

In-Kindスポンサーの配列

In-Kindは今年は
・backlog
・UDトーク
の2件です。

2つが表示されるとき、可能であればセンタリングしたい。

【登壇者詳細】レイアウト崩れ

PCサイズで表示したときに、セッションタイトル部分に左右marginがかかっていないようです。

キービジュアルの差し替え

キービジュアル・わぷーの準備ができ次第、タイミングを見てティザーサイトのキービジュアルから正式版のキービジュアルに変更します。

予定では

わぷー・ロゴ等は固定
後ろのアイコン等の入った背景は下から上方向にゆっくりアニメーション
下の波線は消す？

という感じで考えています。

参考までにわぷー完成前のキービジュアルプロトタイプ画像を入れておきます。

In-Kindスポンサーのレイアウト崩れ

In-Kindスポンサーを2件にしたところ、ブロック間のmarginが当たっていませんでした。

スポンサーページでメタデータを削除

スポンサー詳細ページでのメタデータを削除したいです。

【タイムテーブル】昼休憩後の「SUN]

画像データの縦横の最大値を設定

今、テーマの設定で個別ページのアイキャッチ画像を非表示にしているので、スポンサーの個別ページにロゴを表示するために本文にロゴ画像を指定する必要があります。

この作業をスポンサー班にお願いするためにも、画像データの縦横サイズの最大値をWeb制作チームで指定していただきたいです。お願いします。

例: https://2019.tokyo.wordcamp.org/sponsor/woocommerce/

カウントダウンウィジェットのデザイン調整

カウントダウンウィジェットのデザインをWCT2019のテイストに合わせる。
背景色・角丸の追加・border色の調整。

現状

希望

【タイムテーブル】セッションタイトルの文字リンク色の変更

#289563 ：3.77 → #0c824b ：4.87

トップページ最新情報のタイトルが長すぎる場合、日付が折り返してしまっている

PCにて、記事のタイトルが長い場合、トップページの最新情報のタイトル部分にて、日付が折り返してしまっています。
タイトルが長い場合、日付は次の行にするか折り返さないようにしたほうが見やすいかなと思いました。

※情報が読み取れないわけではないので、余力があったら直していただけるというレベルでいい気がします

投稿者を表示

投稿者名を表示

タイムテーブルのCSSの調整

セッション班・会場班からセッションデイの詳細なタイムテーブルが出たら、CSSを調整する

タイムテーブルページで使用するコンポーネントのCSS作成

交流ルームのタイトルのCSS
セッションデイ・タイムテーブルのタイトルCSS

セッションスタイル作成

ショートコード名: sessions

タイムテーブルスタイル作成

ショートコード名: schedule

readmeにドキュメント整理

https://docs.google.com/document/d/1al05-nHY8dMkCF6E-UNOrHA-hrgQmS22q9MTHWUwb6c/edit#heading=h.dy5h016dyveu

スマホ版はナビゲーションのホームを家アイコンにしたい

現状、スマホ版のメニューは元になったテーマの仕様で項目が先頭3つほどしかされず、後は三点リーダアイコンに集約されます。

表示項目数を増やす目的で、スマホ版の時だけナビゲーションメニュー先頭にあるホームを家アイコンにするのを検討してみようと思います。
ただ、これによって果たしてスマホ版のメニュー領域が広がって表示項目が増えるとは限りません(JSも絡んでいるため)。そのため、検証してみた結果、期待通りの挙動にならなければ実装は見送りたいと思います。