search

framelunch / scaffold-wordpress

FRAME LUNCH Wordpress案件用テンプレ
0 stars 1 forks source link

readme

FRAME LUNCH scaffold for wordpress project

何

フロントまわりを極力npmに切り離したWordpress開発環境です。 WordpressとMySQLはDocker使ってフレッシュ&クリーン&高速&シンプルな環境を用意しました。

元ネタのテーマはBlankSlateを使いました。

動かす

  1. cp .env.sample .env
    • 必要に応じてPortやコンテナ名を変更する
  2. make
  3. yarn start
  4. 外観 > テーマ > fl

あとはよしなに。 なお、 yarn build で例によって圧縮版を出力します

DBの状態をGit管理したいとき

DBファイルをバックアップ取ってやります。

make export

ディレクトリ構成

.
|- /.github/                # GitHub用issue, PRテンプレ
|- /data/                   # DBデータ 今のところMySQLのみ(自動生成ディレクトリ)
|- /flow-typed/             # flowtype用型ファイル(自動生成ディレクトリ)
|- /frontend/               # フロントエンドを構成するファイル
|    |- /assets/            # まるごとthemes/fl以下にコピー
|    |- /scripts/           # JavaScriptはこちら
|    |- /styles/            # CSSはこちら
|- /logs/                   # ログ 今のところnginxしかない
|- /node_modules/           # 3rd-party libraries and utilities for nodeJs (自動生成ディレクトリ)
|- /settings/               # マウントしたい設定型ファイル 今のところnginxしかない
|- /tools/                  # ビルドツール関連
|    |- /gulp/              # gulpタスクを記述したjs。タスクごとに1ファイルとする
|    |- /shell-scripts/     # 便利系シェル
|    |- /webpack/           # webpackビルド設定
|    |- /config.js          # ビルド関係設定ファイル
|- /wordpress/              # テーマやプラグインはこちら
|    |- /plugins/           # プラグイン開発ディレクトリ WPコンテナにまるごとマウントされとる
|    |- /themes/            # テーマ開発ディレクトリ
|        |- /fl/            # 実際に扱うテーマ
|- .env                     # ローカル環境変数設定ファイル (自動生成ディレクトリ)
|- .env.sample              # .env元ネタ
|- .eslintignore            # eslintから除外するファイル
|- .eslintrc                # eslint設定ファイル
|- .flowconfig              # flowtype設定ファイル
|- .gitattributes           # git設定 yarn.lockをバイナリ扱いなど
|- .gitignore               # git管理対象外を記述
|- .node-version            # ndenv用のバージョン指定
|- .prettierignore          # prettier対象除外設定
|- .prettierrc              # prettier設定
|- .stylelintrc             # stylelint設定ファイル
|- gulpfile.js              # gulp実行ファイル
|- Makefile                 # makeコマンド設定ファイル
|- package.json             # The list of 3rd party libraries for nodeJs
|- README.md                # README
|- yarn.lock                # yarn用利用npmsバージョン管理ファイル

flテーマ開発手引

元ネタ

BlankSlate

ほとんどいじってないです。画像突っ込めるかの確認に"武丸"さんを貼っただけ

JS、CSSまわり

使っているツール周りは基本的にscaffold-frontendと同じです。 一部使ってないツールや設定(JSからのCSS読み込み)が混じってますが、どうしようか決めかねてます。

投稿内容へのスタイルあて

以下を参考に、利用者が投稿したコンテンツに対してスタイルを当てておく必要がある。 これでだいたいWISIWYGで付与されるスタイルは一通り当たってるはず。

/* このクラスは適当 */
.post {
    h1,
    h2,
    h3,
    h4 {
        font-weight: var(--fontWeight-bold);
        margin: 0.5em 0;
    }

    h1 {
        font-size: 2.4em;
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.8em;
    }

    h4 {
        font-size: 1.6em;
    }

    h5 {
        font-size: 1.4em;
    }

    h6 {
        font-size: 1.2em;
    }

    em {
        font-style: italic;
    }

    strong {
        font-weight: var(--fontWeight-bold);
    }

    ul,
    ol {
        margin: 20px 0 20px 1em;
    }

    ul li {
        list-style-type: disc;
    }

    ol li {
        list-style-type: decimal;
    }

    blockquote {
        background: rgba(0, 0, 0, 0.1);
        margin: 20px 0;
        padding: 20px 30px;
        font-size: 1.1em;
    }

    a {
        color: var(--color-brand);
    }

    img {
        margin: 20px 0;
    }

    p {
        word-break: break-all;
    }

    hr {
        margin: 1rem 0;
    }
}

いじりどころ

共通っぽいファイルは端折った ブログやるわけでない場合、かなり削除できる

公開時の設定など

Prettierのすすめ

commit時に勝手にコードを整形してくれる。

エディタを設定すると保存時にもいい感じに整形してくれる。

VSCode設定

  1. 拡張を入れる
  2. ローカル設定に以下を追加
{
  // prettier
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[css]": {
    "editor.formatOnSave": true
  },
}

グローバル設定をどうするかは人によりますが、falseにしといたほうがいいと思います。他のプロジェクトで適当に整形されたりするので。

IntelliJ設定

この辺を参考に。

TODO or 野望

そもそも案件こなしたことないからほとんど妄想なんだけど、こんなんでいいのかな？

メモ