Skip to content

Latest commit

 

History

History
189 lines (127 loc) · 12.8 KB

README.JA.md

File metadata and controls

189 lines (127 loc) · 12.8 KB
Raw

FoundationPressNG

Gitter GitHub version License: MIT

日本語 | English

NG is New Generation. olefredrikさんのFoundationPressを基にしています。

これは、世界で最も先進的なレスポンシブ（モバイルファースト）フレームワークであるZurbのFoundation for Sites 6をベースにしたWordPressのスターターテーマです。FoundationPressNGの目的は、あらゆるデザインを構築するために必要な必需品を含む、小さくて便利なツールボックスとして機能することです。FoundationPressNGは、最終的な製品ではなく、出発点となることを意図しています。

フォーク、コピー、修正、削除、共有、好きなようにしてください。

すべての貢献を歓迎します!

必要条件

**このプロジェクトでは、Node.js v12.1.0以上を推奨しています。

FoundationPressNGでは、Sass (超強力なCSS)を使用しています。Sassとは、簡単に言うと、スタイルをより効果的に整然と書けるようにするCSSプリプロセッサです。

Sassはlibsassを使ってコンパイルされているので、マシンにGCCをインストールする必要があります。WindowsユーザーはMinGWから、Macユーザーは[Xcode Command-line Tools]$ xcode-select --installでインストールできます。

クイックスタート

1. リポジトリをクローンし、npmでインストールします

$ cd my-wordpress-folder/wp-content/themes/
$ git clone git@github.com:annrie/FoundationPressNG.git
$ cd FoundationPressNG
$ npm install

1-2. yarn 2　の場合

$ yarn set version berry
$ echo "nodeLinker: node-modules" > .yarnrc.yml
$ yarn install

2. 設定

YAML設定ファイル

FoundationPressには、config-default.yml ファイルが含まれています。設定を変更するには、config-default.yml のコピーを作成して config.yml という名前にして、それに変更を加えます。config.yml` ファイルは git に無視されるので、環境ごとに異なる設定を同じ git repo で使うことができます。

ビルド処理の開始時には、config.yml ファイルが存在するかどうかのチェックが行われます。もし config.yml が存在すれば、設定は config.yml から読み込まれます。config.yml が存在しない場合は、config-default.yml` がフォールバックとして使用されます。

Browsersyncの設定

Browsersync](https://www.browsersync.io/) (ファイル保存時のブラウザの自動更新)を利用したい場合は、前のステップで作成した config.yml ファイルを開き、BROWSERSYNC オブジェクトの下の url プロパティにローカルの開発サーバのアドレスとポート (例: http://localhost:8888) を指定してください。

静的アセットハッシュ/キャッシュブレイカー

テーマを再デプロイした後にユーザーが最新の変更点を確認できるようにしたい場合は、静的アセットハッシュを有効にすることができます。config.yml の中で REVISIONING: true; を設定してください。ハッシュ化は npm run build と npm run dev コマンドで有効になります。BrowserSyncを使ったstartコマンドには適用されません。これは設計によるものです。 ハッシュ化が変更されるのはファイルに実際に変更があった場合のみです。

3. 開始

$ npm start or yarn start

4. 本番用のアセットを作成する

本番用にビルドする場合、CSSとJSはミニ化されます。/dist` フォルダ内のアセットをminify化するには、以下のように実行します。

$ npm run build or yarn build

テーマの.zipファイルを作成するには、以下のように実行してください。

$ npm run package or yarn package

このコマンドを実行すると、テーマのアセットをビルドしてminify化し、テーマの.zipアーカイブを packaged ディレクトリに配置します。これは、テーマをステージングサーバや本番サーバに転送するためにテーマを軽量化するために、/node_modules, /src などの開発者用ファイル/ディレクトリをテーマから除外します。

プロジェクトの構造

/src フォルダにはすべてのアセットの作業ファイルがあります。Gulpによって監視されているファイルに変更を加えるたびに、出力は /dist フォルダに保存されます。このフォルダの内容はコンパイルされたコードであり、(よほどの理由がない限り)触ってはいけません。

ページテンプレート/page-templatesフォルダには、WordPress管理パネルの「ページ」セクションで選択できるテンプレートが入っています。新しいページテンプレートを作成するには、このフォルダに新規ファイルを作成して、テンプレート名を指定するだけです。

あとはかなり自己説明的な感じでしょうか。行き詰った時はお気軽にお尋ねください。

スタイルとSassのコンパイル

  • style.css. このファイルは気にしないでください。(なぜか)WordPressでは必須です。すべてのスタイリングは後述のSassファイルで処理されます。

  • src/assets/scss/app.scss. すべてのスタイルのインポートをここで行います。

  • src/assets/scss/global/*.scss. グローバル設定

  • src/assets/scss/components/*.scss. ボタンなど。

  • src/assets/scss/modules/*.scss: ボタンなど。トップバーやフッターなど。

  • src/assets/scss/templates/*.scss: トップバー，フッターなど

  • src/assets/scss/modules/*.scss: トップバー，フッターなど

  • src/assets/scss/templates/*.scss: ページテンプレートのスタイリング

  • dist/assets/css/app.css. このファイルはドキュメントの <head> セクションに読み込まれ、プロジェクト用にコンパイルされたスタイルが含まれています。

Sass を初めて使う方は、scss ファイルを変更しても app.css にコンパイルされるようにするためには、バックグラウンドで Gulp を起動しておく必要があることに注意してください (npm start)。

JavaScriptのコンパイル

Foundationのモジュールを含むすべてのJavaScriptファイルは、src/assets/js/app.jsファイルを通してインポートされます。ファイルは、webpackをモジュールバンドルラーとして、モジュール依存性を使ってインポートされます。

モジュールやモジュールのバンドルについてよく知らない場合は、this resource for node style require/exportsやthis resource to understand ES6 modulesを参照してください。

ファウンデーションモジュールは src/assets/js/app.js ファイルにロードされます。デフォルトではすべてのコンポーネントがロードされます。また、どのモジュールをインクルードするかを選択することもできます。ファイルの指示に従うだけです。

追加のJavaScriptファイルを app.js とは別に出力する必要がある場合は、以下のようにします。

  • 新しい custom.js ファイルを src/assets/js/ に作成します。jQueryを使用する場合は、ファイルの先頭に import $ from 'jquery'; を追加します。
  • config.yml で、PATHS. entries に src/assets/js/custom.js を追加する。
  • ビルド (npm start)
  • これで dist/assets/js/ ディレクトリに custom.js ファイルが出力されます。

デモ

ローカルサイト

ローカルでのWordPress開発には、以下のいずれかの設定をお勧めします。

チュートリアル

ドキュメンテーション

ショーケース

このリストに掲載されるべきサイトを作ったことはありますか？このリストに載せるべきサイトを作ったことがありますか？教えてください

プルリクエスト

プルリクエストは大歓迎です。以下のガイドラインに従ってください。

  1. 問題を解決する。機能は素晴らしいものですが、それ以上に優れているのは、あなたが発見したコードの問題をクリーンアップして修正することです。
  2. あなたのコードにバグがなく、新しいバグを導入していないことを確認してください。
  3. プルリクエスト](https://help.github.com/articles/creating-a-pull-request)を作成します。
  4. すべての Travis-CI ビルドチェックに合格していることを確認します。