トップへ戻る
BLOGS

WordPress 既存のテーマでコアブロックを拡張する (リストブロック)

WordPress 既存のテーマでコアブロックを拡張する (リストブロック)

これまで学んできたことを活かしオリジナルテーマであるこのサイトの既存のブロック、
今回はリストブロックの拡張を目的として備忘録を残しておきます

方法としては以前の記事でも紹介していた
「既存のテーマでブロックを拡張する環境構築編」を使用しコアブロックの環境構築を行います

そして「WordPress 既存のブロックスタイルをカスタマイズする」 にて紹介している方法をもちいてリストのデザインを変更します

最終的に「WordPress 既存のテーマでコアブロックを拡張する (段落、見出し)」でも使用しているWordPressのフックをブロックスクリプト上で実行しコアブロックのさらなるカスタマイズを行いたいとおもいます

今回は実装段階よりも、その前の設計の部分でかなり苦戦してしまいました、、
そこらへんも恥ずかしながら紹介しつつ、アップデートの際にもっと素晴らしいコンテンツが造れるように改善していけたらと思います

リストブロック実装概要

まずはいつものように概要を考えて並べてみます
この段階で羅列したことを実現可能にするための実務で言うところの「要件定義」を模した設計段階です

  • リストのデザインを選択可能にする
  • リストのアイコンを選択可能にする
  • リスト全体のテーマカラー(アイコンのカラー)を選択可能にする

まずはこれだけでもかなり印象が変わるのではないでしょうか

やりたいことが決まったらこれらを実現させるために、もっとプログラム的に踏み込んだ実装概要を考え、書き出していきます
今回はこれを大幅に変更を余儀なくされ、戸惑いました、、、

  • デザインの項目はregisterBlockStyleにて登録する
  • カスタム属性値を設定し、アイコン用とカラーテーマ用のstringを定義
  • コアブロックのインスペクターにフックしオリジナル項目を追加
  • リストのアイコン設定はFont Awesomeのアイコンを使用
  • アイコンの識別はHTMLのデータ属性に追加する
  • データ属性の値によって読み込むアイコンの種類を変更する
  • カラーテーマの値はクラス名としてラッパー要素に追加する
  • レンダリングはblocks.getSaveContent.extraPropsで登録
  • それぞれの値を反映させたSCSSでスタイリング

こんな流れで実装できそうです


CSS設計の考え方としては、まず最初に実装するのはデザインの要素が含まれる実装をすべて完了してから、次に全体に影響を与えるカラーテーマの設定を盛り込んでいく方法がスマートです

具体的なワークフロー

  • registerBlockStyleのスタイリングでリスト要素の がわ の線や要素同士の区切り線などをカスタマイズできるようにする
  • この段階で基本的なベースとなるスタイリングを整える
  • アイコンを変更できるようにフックなどで実装する。このときクラス名などでセレクターを分岐できるようにしておく
  • カラーテーマを実装。これも分岐できるようにしておく
  • フロントエンドまで実装する
  • 全体のスタイリングを整える

この流れが良さそうです

開発環境

なにはともあれまずは環境構築から始めていきます 環境構築の記事をご参考ください

読んでおきたい記事

今回のwebpackの設定は以下のようにしました

webpack.config.js

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require("path");

module.exports = {
  ...defaultConfig, //既存の設定をここに展開
  entry: {
    exbox: "./src/exbox.js",
    iconbox: "./src/iconbox.js",
    core_expantion: "./src/core_expantion.js",
    list_expantion: "./src/list_expantion.js",
  },
  output: {
    path: path.join(__dirname, "/build"),
    filename: "[name].js",
  },
};

エントリーファイルは「srcディレクトリ」に定義。テーマで読み込むファイルは「buildディレクトリ」に同名ファイルとして出力されるようにしてます

functions.php

$excore_asset_file = include __DIR__ . '/../blocks/build/list_expantion.asset.php';
wp_enqueue_script(
  'list_expantion-script',
  get_theme_file_uri( '/blocks/build/list_expantion.js' ),
  $excore_asset_file['dependencies'],
  $excore_asset_file['version'],
  true
);

上記のコードをadd_actionで読み込んでエンキューします

ここから実装するコードはすべてここで定義した「/src/list_expantion.js」に記述していく感じになります

リストのスタイルを定義 registerBlockStyle

まずはリストの全体のスタイリングである「枠」であったり、「区切り線」などを変更できるようにするため、registerBlockStyle()メソッドで簡単にオリジナルのCSSを追加します

読んでおきたい記事
// リストブロックスタイル登録
wp.blocks.registerBlockStyle("core/list", {
  name: "border-solid",
  label: "シンプルボーダー",
  isDefault: true,
});
wp.blocks.registerBlockStyle("core/list", {
  name: "dashed",
  label: "破線枠",
  isDefault: false,
});
wp.blocks.registerBlockStyle("core/list", {
  name: "shadow",
  label: "シャドウ枠",
  isDefault: false,
});
wp.blocks.registerBlockStyle("core/list", {
  name: "note-dashed",
  label: "ノート風破線",
  isDefault: false,
});
wp.blocks.registerBlockStyle("core/list", {
  name: "border-none",
  label: "枠線なし",
  isDefault: false,
});
wp.blocks.registerBlockStyle("core/list", {
  name: "underline-only",
  label: "枠線なし下線のみ",
  isDefault: false,
});

registerBlockStyleは第一引数に指定したブロックに対して、第二引数にて指定するnameプロパティの値を「is-style-○○」として対象のブロックに付与することができます

この時点で簡単に見栄えを良くするためにCSSも記述していきます

_list-style.scss

ul {
  list-style: disc;
  border: 2px solid #3333;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin: 3em;
  padding: 0.6em 0.5em 0.6em 2.2em ;
  @include md {
    font-size: 15px;
  }
  &.is-style-shadow {
    border-radius :8px;
    box-shadow :0px 0px 5px silver;
  }
  &.is-style-dashed {
    border-style: dashed;
  }
  &.is-style-note-dashed {
    li:not(:last-child) {
      border-bottom: 1px dashed #777;
      border-width: 1px;
    }
  }
  &.is-style-border-none {
    border: none;
  }
  &.is-style-underline-only {
    border: none;
    li:not(:last-child) {
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-width: 1px;
    }
  }

  li {
    margin: 7px 0px;
    font-weight: bold;
    line-height: 30px;
  }
}

これでひとまず既存のリストブロックに対してスタイル設定を追加できるようにし、さらに最低限の見栄えができました

カスタム属性値を設定

ここからは下記記事の要領、ほぼ同じ流れで実装していくため、ある程度のコードはテンプレート化しております

読んでおきたい記事

ここからはリストブロックに好きなアイコンを追加できるようにアイコン用の文字列を、、、
カラーテーマとしての設定を保存する文字列を、、保存できるようにattributesに追加していきます

属性値を追加するためにはblocks.registerBlockTypeフックに登録します

list_expantion.js

import { addFilter } from "@wordpress/hooks";
import lodash from "lodash";
const isValidBlockType = (name) => {
  const blockType = ["core/list"];
  return blockType.includes(name);
};

// リストブロックにカスタム属性値を追加
function addAttribute(settings) {
  if (isValidBlockType(settings.name)) {
    settings.attributes = lodash.merge(settings.attributes, {
      listIcon: {
        type: "string",
        default: "",
      },
      listThemeColor: {
        type: 'string',
        default: '',
      }
    });
  }
  return settings;
}
addFilter("blocks.registerBlockType", "oja/add-attr", addAttribute);

上記のコードを解説します
まずコードのトップレベルでコアブロックの中のリストブロックに対してtrueを返す関数を定義しておき再利用できるようにします。

blocks.registerBlockTypeフックでは元のブロックの設定が引数として渡ってきます
そのためこの引数の中のattributesにアクセスするとコアブロックの属性値というわけです

lodashライブラリの活用

LodashはJavaScriptで使用されるユーティリティライブラリで、簡単に説明するとJavaScriptの便利な機能をまとめて関数(メソッド)として提供されています
便利そうなのでこれからお世話になっていこうとおもいます

使用するにはライブラリをインストールする必要があるため、まだの方は下記のコマンドでインストールできます

ターミナル

$ npm install --save lodash

今回使用したlodash.mergeメソッドはオブジェクトのマージに使用するメソッドです

lodash.merge(セッティングオブジェクト, 結合するオブジェクト)

これで元のセッティングに対して新たな属性値を追加(マージ)することができました。

次は管理画面上からこれらの追加した属性値に対して値を変更できるようにするUIをフックします

インスペクターにオリジナル項目を追加

インスペクターに追加の設定を加えたい場合はeditor.BlockEditにフックします

今回追加したい内容としては、アイコンを選択するためのSelectControlの追加とカラーテーマの選択用のRadioControlを設定画面に追加します

import { createHigherOrderComponent } from "@wordpress/compose";
import { Fragment } from "@wordpress/element";
import { InspectorControls } from "@wordpress/block-editor";
import { PanelBody, SelectControl, RadioControl } from "@wordpress/components";
import { ListAwesomeIcons } from "./modules/ListAwesomeIcons";
// リストブロックにインスペクターを追加
const addBlockControl = createHigherOrderComponent((BlockEdit) => {
  return (props) => {
    const { setAttributes, isSelected, attributes, name } = props;
    const { listIcon, listThemeColor } = attributes;
    // isValidBlockType で指定したブロックが選択されたら表示
    if (isValidBlockType(name)) {
      return (
        <Fragment>
          <BlockEdit {...props} />
          {isSelected && (
            <InspectorControls>
              <PanelBody
                title="リストデザイン設定"
                initialOpen={true}
                className="oja-listblock-controle"
              >
                <SelectControl
                  label="リストのアイコンを変更"
                  value={listIcon}
                  options={ListAwesomeIcons}
                  onChange={(listIcon) => setAttributes({ listIcon })}
                />
                <RadioControl
                  label="リストのテーマカラーを変更"
                  className=" list-color-setting"
                  selected={listThemeColor}
                  options={[
                    { label: "ホワイト", value: "" },
                    { label: "ブルー", value: "blue" },
                    { label: "レッド", value: "red" },
                    { label: "グリーン", value: "green" },
                    { label: "イエロー", value: "yellow" },
                    { label: "ピンク", value: "pink" },
                    { label: "グレー", value: "gray" },
                    { label: "ブラック", value: "black" },
                  ]}
                  onChange={(val) => setAttributes({ listThemeColor: val })}
                />
              </PanelBody>
            </InspectorControls>
          )}
        </Fragment>
      );
    }
    return <BlockEdit {...props} />;
  };
}, "addBlockControl");
addFilter("editor.BlockEdit", "oja/block-control", addBlockControl);

上のコードを解説していきます

editor.BlockListBlockにフックした関数は必ずブロックのpropsをreturnする必要があります

この関数はBlockEditを引数として受け取り、元のedit()の出力を展開しつつ高階関数としてラップして要素を返すことができます

リストのアイコン設定

今回もコードの視認性向上のため「ListAwesomeIcons」という別ファイルからアイコンデータの配列を読み込むようにしております

アイコンデータはどうするか?

ここで使用するのは「Font Awesome」のアイコンデータです
「Font Awesome」のデータと一言でいってもそのデータのタイプは様々であり、以前のアイコンボックスの実装などでは「Font Awesome」のHTMLタグのクラス名をそのまますげ替えるといった手法を撮ったりしていましたが、、、

ここで失敗してしまい時間がかかりました、、

先ず私が選択したのはCSSの疑似要素でアイコンを表示するユニコードをSelectControlの値として渡し、それをCSS関数のattr()にて読み込みこれを表示する方法でした
この方法ではHTMLエンティティと呼ばれる形式にして保存するわけですが、WordPressの仕様かユニコードをどのように渡してもattr()でCSSから値を読み込む際にサニタイズされるのか、疑似要素が無効になってしまいました。

ということでどうしても直接ユニコードをCSSへ渡すことが困難であったため悩んだ挙げ句、
HTMLのデータ属性に指定した値によってCSSのセレクターを分岐させるという視認性の悪い方法で実装することにしました

アイコンの識別をデータ属性に追加する

ということでアイコンの仕様で迷走したため今回は以下のようなvalue値に設定してこれをHTMLのデータ属性に追加することでCSSやJSでその属性値を判定するようにします

ListAwesomeIcons.js

export const ListAwesomeIcons = [
  { label: "なし", value: "" },
  { label: "番号", value: "numbers" },
  { label: "大●", value: "large-disc" },
  { label: "ダブルアングル", value: "angle-double-right" },
  { label: "右アングル", value: "angle-right" },
  { label: "右矢印", value: "caret-right" },
  { label: "チェックマーク", value: "check" },
  { label: "ダブルチェック", value: "check-double" },
  { label: "サークルチェック", value: "circle-check" },
  { label: "サークルシェブロン", value: "circle-chevron-right" },
  { label: "サークルライト", value: "circle-right" },
  { label: "サークルXマーク", value: "circle-xmark" },
  { label: "クリップボードチェック", value: "clipboard-check" },
  { label: "大冠", value: "crown" },
  { label: "右差し指", value: "hand-point-right" },
  { label: "Point!", value: "hand-point-up" },
  { label: "ペンシル", value: "pencil" },
  { label: "ドクロマーク", value: "skull" },
  { label: "星マーク", value: "splotch" },
  { label: "スクエアチェックマーク", value: "square-check" },
  { label: "タグ", value: "tag" },
  { label: "警告", value: "triangle-exclamation" },
  { label: "犬の手", value: "dog-hand" },
];

ここで用意したアイコンの値はわかりやすさ重視で選んだラベルと値の配列です

次に行うことはエディター側とフロントエンド側でコアブロックのレンダリングにフックしてラッパー要素にHTMLのデータ属性を付与します
まずはエディター側の管理画面上のUIから構築していきます

// リストブロックのエディター上のレンダリングを変更
const withListWrapperProps = createHigherOrderComponent((BlockListBlock) => {
  return (props) => {
    const { attributes, className, name, isValid, wrapperProps } = props;
    if (isValid && isValidBlockType(name)) {
      const { listIcon, listThemeColor } = attributes;
      if (listIcon !== "" || listThemeColor !== '') {
        const BlockwrapperProps = lodash.merge(wrapperProps, listIcon ? {"data-listicon": listIcon} : null);
        let extraClass = listThemeColor ? "list-themecolor-" + listThemeColor : null;

        return (
          <BlockListBlock
            {...props}
            className={classNames(className, extraClass)}
            wrapperProps={BlockwrapperProps}
          />
        );
      }
    }
    return <BlockListBlock {...props} />
  };
}, "withListWrapperProps");
addFilter(
  "editor.BlockListBlock",
  "oja/with-list-wrapper-prop",
  withListWrapperProps
);

エディター上の要素を変更するためにはeditor.BlockListBlockフックを使用します

このフックで実行する関数にはエディター上のブロック要素がすべて「BlockListBlock」として渡って来ます。注目していただきたいのはこの関数が最終的に返すreturnメソッドです、、

<BlockListBlock  //ブロック要素
 {...props}      //元のpropsを展開
 className={classNames(className, extraClass)} //クラス名
 wrapperProps={BlockwrapperProps} //追加のprops
/>

上記の内容を返しているわけですが、classNameには追加のカスタムクラス名を、、 wrapperPropsには追加のカスタムpropsをそれぞれ追加することができます

const BlockwrapperProps = lodash.merge(wrapperProps, listIcon ? {"data-listicon": listIcon} : null);

上記の記述で元のwrapperPropsに対してアイコンの選択があった場合に「data-listicon=”○○”」といった形で属性値を追加できるようにオブジェクト形式にてマージしています

カラーテーマの値をクラス名として追加

ここまでの流れでほぼ説明してしまいましたが、カラーテーマとしてラジオボタンで設定した値を追加のクラス名としてラッパー要素に追加していこうとおもいます

先のエディター上のブロックのフックeditor.BlockListBlockのclassNameに渡せれるように、値があった場合にデフォルトのクラス名とマージするようにします
npmライブラリのclassnamesを利用すると楽なので今回もお世話になります

import classNames from "classnames"; //ライブラリをインポート
let extraClass = listThemeColor ? "list-themecolor-" + listThemeColor : null;
・・・省略・・
 className={classNames(className, extraClass)} //return時に実行

これでアイコンやカラーテーマを変更したら即時、クラス名やデータ属性としてラッパー要素に変更がかかるように実装することができました、、
ここからCSSでスタイリングしていくことで目的の機能を実装することができそうです

blocks.getSaveContent.extraProps

エディター画面上のレンダリングが完成したので、同じ出力になるようにsave()メソッドにフックしてフロントエンドのレンダリングも変更したいとおもいます

save()メソッドのpropsを変更するにはblocks.getSaveContent.extraPropsフックに登録します

// フロントエンドに属性値、クラス名を追加
const addListSaveProps = (extraProps, blockType, attributes) => {
  if (isValidBlockType(blockType.name)) {
    const { listIcon, listThemeColor } = attributes;
    const wrapperProps = lodash.merge(
      extraProps.wrapperProps,
      listIcon ? { "data-listicon": listIcon } : null
    );
    let extraClass = listThemeColor
      ? "list-themecolor-" + listThemeColor
      : null;
    extraProps.className = classNames(extraProps.className, extraClass);

    return lodash.merge(extraProps, { ...extraProps, ...wrapperProps });
  }
  return extraProps;
};
addFilter("blocks.getSaveContent.extraProps","oja/add-props",addListSaveProps);

blocks.getSaveContent.extraPropsフックは引数を3つ取ることができます

  • extraPropsには登録されるブロック要素のpropsが入ってきます
  • blockTypeはフックしたブロックの識別子となるデータです
  • attributesはブロックの属性値です

そしてこのフックの関数ではeditor.BlockListBlockのときと同じく必ずブロックのpropsをreturnする必要があります

やっている内容としては前項の管理画面側と同じで、HTMLのデータ属性としてアイコンの識別子を出力し、カラーテーマの識別子はクラス属性の値として追加するようにしたいので、、

前項でも使用したlodash.merge()メソッドを使用してオブジェクト同士をマージしています

管理画面のバリデーションエラーについて

このフックを登録してから管理画面を再読み込みすると「予期せぬエラー」などと表示されブロックの再読み込みが求められます。
これはブロックを登録するsave関数の値が前回保存した内容と異なる場合にWordPress側のバリデーションによって起こるエラーで今回の例文ではラッパー要素に追加した属性値が変更されたことによってエラーとなっておりますがブロックのリカバリーで問題なく復旧できるはずです

最終的なスタイリング

SCSSで最終的なスタイリングを整えます
ざっとスタイリングしているだけなのでコピーしたい人は開いてご参考ください

_list-style.scss

@charset 'utf-8';
@mixin ListThemeColor($color) {
  background-color: rgba($color, 0.1);
  border-color: $color;
  &.is-style-shadow {
    border: none;
    box-shadow :0px 0px 5px $color;
  }

  &[data-listicon="large-disc"],
  &[data-listicon="disc-numbers"],
  &[data-listicon="dice-numbers"] {
    li {
      &::before {
        background-color: $color;
      }
    }
  }

  li {
    &::before{
      color: $color;
    }
  }
}

ul {
  list-style: disc;
  border: 2px solid #3333;
  font-size: 16px;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  margin: 3em;
  padding: 0.6em 0.5em 0.6em 2.2em ;
  @include md {
    font-size: 15px;
  }
  &.is-style-shadow {
    border-radius :8px;
    box-shadow :0px 0px 5px silver;
  }
  &.is-style-dashed {
    border-style: dashed;
  }
  &.is-style-note-dashed {
    li:not(:last-child) {
      border-bottom: 1px dashed #777;
      border-width: 1px;
    }
  }
  &.is-style-border-none {
    border: none;
  }
  &.is-style-underline-only {
    border: none;
    li:not(:last-child) {
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-width: 1px;
    }
  }

  li {
    margin: 7px 0px;
    font-weight: bold;
    line-height: 30px;
  }
  &[data-listicon] {
    list-style: none;
    padding-left: 0.5em;
    li {
      padding-left: 2.4em;
      position: relative;
      &::before {
        content: '';
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: 1%;
        top: 5px;
      }
    }
  }

  &[data-listicon="numbers"] {
    counter-reset: number;
    li {
      &::before {
        font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        counter-increment: number;
        content: counter(number)'.';
      }
    }
  }
  &[data-listicon="disc-numbers"] {
    counter-reset: number;
    li {
      padding-left: 3em;
      &::before {
        font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        counter-increment: number;
        content: counter(number);
        text-align: center;
        color: #fff !important;
        line-height:30px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
      }
    }
  }
  &[data-listicon="dice-numbers"] {
    counter-reset: number;
    li {
      padding-left: 3em;
      &::before {
        font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
        counter-increment: number;
        content: counter(number);
        width: 30px;
        height: 30px;
        text-align: center;
        color: #fff !important;
      }
    }
  }
  &[data-listicon="large-disc"] {
    li {
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        top: 15px;
      }
    }
  }
  &[data-listicon="angle-double-right"] {
    li {
      &::before {
        content: '\f101';
      }
    }
  }
  &[data-listicon="angle-right"] {
    li {
      &::before {
        content: '\f105';
      }
    }
  }
  &[data-listicon="caret-right"] {
    li {
      &::before {
        content: '\f0da';
      }
    }
  }
  &[data-listicon="check"] {
    li {
      &::before {
        content: '\f00c';
      }
    }
  }
  &[data-listicon="check-double"] {
    li {
      &::before {
        content: '\f560';
      }
    }
  }
  &[data-listicon="circle-check"] {
    li {
      &::before {
        content: '\f058';
      }
    }
  }
  &[data-listicon="circle-chevron-right"] {
    li {
      &::before {
        content: '\f138';
      }
    }
  }
  &[data-listicon="circle-right"] {
    li {
      &::before {
        content: '\f35a';
      }
    }
  }
  &[data-listicon="circle-xmark"] {
    li {
      &::before {
        content: '\f057';
      }
    }
  }
  &[data-listicon="clipboard-check"] {
    li {
      &::before {
        content: '\f46c';
      }
    }
  }
  &[data-listicon="crown"] {
    li {
      &::before {
        content: '\f521';
      }
    }
  }
  &[data-listicon="hand-point-right"] {
    li {
      &::before {
        content: '\f0a4';
      }
    }
  }
  &[data-listicon="hand-point-up"] {
    li {
      &::before {
        content: '\f0a6';
      }
    }
  }
  &[data-listicon="pencil"] {
    li {
      &::before {
        content: '\f303';
      }
    }
  }
  &[data-listicon="skull"] {
    li {
      &::before {
        content: '\f54c';
      }
    }
  }
  &[data-listicon="splotch"] {
    li {
      &::before {
        content: '\f5bc';
      }
    }
  }
  &[data-listicon="square-check"] {
    li {
      &::before {
        content: '\f14a';
      }
    }
  }
  &[data-listicon="tag"] {
    li {
      &::before {
        content: '\f02b';
      }
    }
  }
  &[data-listicon="triangle-exclamation"] {
    li {
      &::before {
        content: '\f071';
      }
    }
  }
  &[data-listicon="dog-hand"] {
    li {
      &::before {
        content: '\f1b0';
      }
    }
  }
  &.list-themecolor-blue {
    @include ListThemeColor(#1bb4d3);
  }
  &.list-themecolor-red {
    @include ListThemeColor(#ee5656);
  }
  &.list-themecolor-green {
    @include ListThemeColor(#39cd75);
  }
  &.list-themecolor-yellow {
    @include ListThemeColor(#f7cf2e);
  }
  &.list-themecolor-pink {
    @include ListThemeColor(#f7b2b2);
  }
  &.list-themecolor-gray {
    @include ListThemeColor(#9c9c9c);
  }
  &.list-themecolor-black {
    @include ListThemeColor(#313131);
    li {
      color: #fff;
      &::before {
        color: #fff;
      }
    }
  }
}

CSS設計のお話しに戻りますが、トップレベルで基本となるスタイリングを定義し、追加のセレクターとして、data属性の値のセレクターで要素に対して「アイコン」を追加。

そしてカラー設定をまとめて出力できるように@mixinを定義しておき、カラー設定のセレクターで基本となるカラーを設定してみました

今回の学び

正直今回は前回の記事で作成したコアブロックカスタムの応用のような形での実装となりましたが、やはり背伸びしすぎたのか、、、Font Aweosomeのアイコンの出力でなかなか戸惑いました、、、

改めてどこかで調べ直すとともにそろそろ現在の自分のサイトのスタイリングに少々不満が、、、いや以前からあったデザイン面の不満が増大しました 苦笑

その他JavaScriptライブラリの「lodash」であったり、いかに少ない記述、そして統一性のあるロジックのチョイスなど、より実際の現場に近しい方法に近づいたのではないでしょうか。

こうしてテーマのカスタマイズを行っているとプラグインとして追加していたときより全体のコードの統一性であったり互換性であったりを考えさせられます

CSS一つとってもコアブロックであるが為セレクターがかぶってしまって修正に入ったり。
関数としても同じ記述は別のロジックで使用している内容と近い為、なるべくならテーマの中のロジックは関数やClassとしてまとめてしまってメンテナンス性を上げたりもっともっと設計をアップデートしたくなって来ました

お疲れさまでした(^^)

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA