月: 2020年4月

カテゴリー
VS Code

VS Code 機能拡張 設定メモ

デフォルトを上書きする個人設定メモ。

JS & CSS Minifier

// ミニファイ自動実行
"es6-css-minify.minifyOnSave": "yes",
// ターゲットディレクトリ
"es6-css-minify.jsMinPath": "/js",

Live Sass Compiler

// ソースマップ
"liveSassCompile.settings.generateMap": false,
// ベンダープレフィックス
"liveSassCompile.settings.autoprefix": null,
// 書き出し形式とディレクトリ
"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/css",
    },
],
// 書き出し形式とディレクトリ
// デフォルト（上）とミニファイ書き出し
"liveSassCompile.settings.formats": [
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css",
    },
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "/css",
    },
],

Easy Sass

// オートコンパイルを実行しない
"easysass.compileAfterSave": false,
// パーシャルファイルは出力しない
"easysass.excludeRegex": "^_+",
// ターゲットディレクトリ
"easysass.targetDir": "css",
カテゴリー
Node.js

Node.js で EJS

Sass のコンパイルや JavaScript の minify などは、VS Code（私的メインエディタ） の機能拡張に任せて、EJS だけ npm-scripts に監視しさせる開発環境構築メモ。Node.js はインストール済み。

必要パッケージのインストール

  • rimraf: 書き出しディレクトリのクリーン
  • watch: .ejs の変更を監視
  • chokidar-cli: .ejs の変更を監視
  • ejs-cli: .ejs を .html に変換
// npm i -D rimraf watch ejs-cli
npm i -D rimraf chokidar-cli ejs-cli

※読み方が分からないが chokidar-cli の方が watch より 反応が良い気がしたので変更＠200406

ディレクトリ構造

数ページの会社案内のようなサイトを作るとして、dist ディレクトリに何から何まで書き出すと想定。

dist
├ assets // css や js が書き出される
├ summary
│　└ index.html
└ index.hmlt
node_modules
src
├ assets // sass や js を保存（ここは VS Code に任せる）
├ summary
│　└ index.ejs
├ _footer.ejs
├ _header.ejs
└ index.ejs
package.json

npm-scripts

「dist」ディレクトリの .html は必ず .ejs から変換。

// "ejs": "rimraf dist/**/*.html && ejs-cli -b src **/!(_)*.ejs -o dist",
"ejs": "rimraf \"dist/**/*.html\" && ejs-cli -b src \"**/!(_)*.ejs\" -o dist",
// "watch/ejs": "watch \"npm run ejs\" src -p /assets/"
"watch/ejs": "chokidar \"src/**/*.ejs\" -c \"npm run ejs\""

※watch が実行するコマンドは、Windows の場合、ダブルクォーテーションで囲まないとエラーになった。
※watch は、「-p」の後に正規表現で除外を設定するけど、chokidar は監視を絞り込む感じ。
※Mac で rimraf, ejs-cli の対象をダブルクォーテーションで囲まないとエラーになった＠200407

リンク

カテゴリー
WordPress

カスタム投稿タイプ

WordPress のカスタム投稿タイプ。頻繁に設定するものでもなく、機会があるたび、自分で書いた古いコードやネットで再検索するのでメモ。

基本形

例えば、「ニュース」ようのカスタム投稿タイプを作るとする。「my_post_type」としている関数名は、既存の関数名と被らなければ好きな名前で。

add_action('init', 'my_post_type');

function my_post_type()
{
    register_post_type(
        'news',
        array(
            'label' => 'ニュース',
            'labels' => array(
                'all_items' => 'ニュース一覧',
            ),
            'public' => true,
            'menu_position' => 5,
            'has_archive' => true,
        )
    );
}

余計なコードは書きたくないので、デフォルト値や自動的に継承される値をわざわざ書かなければ、私的にはこれが基本かな。

基本形＋階層化カテゴリ

先の「my_post_type」関数内に、階層化カテゴリの設定も追加。「’hierarchical’ => true」がないとタグになる。

add_action('init', 'my_post_type');

function my_post_type()
{
    register_post_type(
        'news',
        array(
            'label' => 'ニュース',
            'labels' => array(
                'all_items' => 'ニュース一覧',
            ),
            'public' => true,
            'menu_position' => 5,
            'has_archive' => true,
        )
    );

    register_taxonomy(
        'news_cat',
        'news',
        array(
            'hierarchical' => true,
        )
    );
}

複数追加

たとえば、「ニュース」と「メニュー」の二つを追加するなら、関数内に二つ「register_post_type」を設定すれば OK。

add_action('init', 'my_post_type');

function my_post_type()
{
    register_post_type(
        'news',
        array(
            'label' => 'ニュース',
            'labels' => array(
                'all_items' => 'ニュース一覧',
            ),
            'public' => true,
            'menu_position' => 5,
            'has_archive' => true,
        )
    );

    register_post_type(
        'menu',
        array(
            'label' => 'メニュー',
            'labels' => array(
                'all_items' => 'メニュー一覧',
            ),
            'public' => true,
            'menu_position' => 5,
            'has_archive' => true,
        )
    );
}

リンク