WP Demo

作成日 :

1-7.SVG アイコン設定

SVG（Scalable Vector Graphics）は、二次元のベクトルグラフィックスを記述するためのXMLベースの画像形式。1999年からW3C（World Wide Web Consortium）によって標準化が進められている。

アイコンに最適な SVG

  • 無限の解像度
    ベクター形式のため、拡大・縮小しても境界線がボケない。高解像度ディスプレイ（Retina等）でも常に鮮明。
  • CSSでの制御
    mask-image や fill プロパティを用いることで、画像ファイルを差し替えることなく、CSSだけで色やサイズ、アニメーションを自由に変更可能。
  • 軽量なファイルサイズ
    単純な形状であれば、ビットマップ画像よりも圧倒的にデータ量が少なく、読み込み速度に貢献する。
  • アクセシビリティ
    コード内に <title> タグなどを記述できるため、スクリーンリーダーが内容を認識しやすく、SEOやアクセシビリティの面でも優れる。

HTML記述、CSS定義、クイックタグ登録

SVG でマスクしたものを基本に、Android は背景に公式を直接表示、白抜きは背景をマスクの透明でくり抜き親要素の背景色がアイコン色となる。

                    

<i class="icon-setup wrench" role="img" aria-label="レンチ"></i>
<i class="icon-setup windows" role="img" aria-label="ウィンドウズ"></i>
<i class="icon-setup seedling" role="img" aria-label="苗"></i>
<i class="icon-setup icon-bg android" role="img" aria-label="android"></i>
...
<i class="icon-setup apple" role="img" aria-label="apple"></i>
<i class="icon-setup apple-circle-gray" role="img" aria-label="apple-circle-gray"></i>
<i class="icon-setup icon-bg apple-gray" role="img" aria-label="apple-gray"></i>
COPY
/* 🔸 <i>リセット */
i {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* 🔸 アイコン共通設定（マスク 背景画像共通）*/
.icon-setup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;    /* 斜体を解除 */
  line-height: 1;        /* 行高の影響を排除 */
  vertical-align: middle; /* 周囲のテキストとの配置を中央に */
  text-indent: 0;        /* インデント設定を無視 */
  cursor: default;
  pointer-events: none;  /* アイコン自体はクリックを邪魔しない */
}

/* 🔸 疑似要素 マスク用 */
.icon-setup::before {
  content: "";
  display: inline-block;

  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* アイコン自体のサイズ（親の文字サイズに比例） */
  width: 1em;
  height: 1em;
}

/* 🔸 疑似要素 背景画像用 */
.icon-bg::before {
  /* マスク機能一括無効化 */
  -webkit-mask: none !important;
  mask: none !important;

  /* 背景色 */
  background-color: transparent !important;
  
  /* 背景画像設定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 🔸 個別アイコン設定 */
/* 🔸 Android（背景画像） */
.icon-setup.icon-bg.android::before {
  background-image: url("../images/svg/android-head_flat.svg");
}

/* アップル */
.icon-setup.apple::before {
  -webkit-mask-image: url("../images/svg/apple-brands-solid.svg");
  mask-image: url("../images/svg/apple-brands-solid.svg");
  background-color: #8a8a8a;
}

/* 🔸🔸 iOS Safari アップル（グレー丸背景・白抜き） */
.icon-setup.apple-circle-gray::before {
  /* マスクを2層重ねる：リンゴの形(白抜き用) と 円の形(背景用) */
  -webkit-mask-image: 
    url("../images/svg/apple-brands-solid.svg"), 
    radial-gradient(circle, #000 100%, transparent 100%);
  mask-image: 
    url("../images/svg/apple-brands-solid.svg"), 
    radial-gradient(circle, #000 100%, transparent 100%);

  /* マスクの合成モード */
  /* 「円」から「リンゴ」を差し引く（型抜きする、親要素の背景色がアイコン色）設定 */
  -webkit-mask-composite: source-out;
  mask-composite: exclude; /* 物理的にくり抜き */

  /* 背景色 */
  background-color: #8a8a8a;
  border-radius: 50%;

  /* サイズと位置 */
  -webkit-mask-size: 55%, 100%; /* リンゴを少し小さく */
  mask-size: 60%, 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: 50% 45%;
  width: 1.1em;
  height: 1.1em;
}

/* apple-gray */
.icon-setup.icon-bg.apple-gray::before {
  background-image: url("../images/svg/apple-gray.svg");
  clip-path: circle(50% at 50% 50%);
}
COPY
/* 🔸 クイックタグ設定 個別登録 */
( function( wp ) {
  console.log('Quick Tag: Script loaded');

  const { registerPlugin } = wp.plugins;
  const { createPortal, useEffect, useState } = wp.element;
  const { Button } = wp.components;

  const QuickTag = () => {
    const [ container, setContainer ] = useState( null );

    useEffect( () => {
      const interval = setInterval( () => {
        const header = document.querySelector( '.edit-post-header' );
        if ( header && !document.querySelector( '.wp-test-custom-quick-tag' ) ) {
          const div = document.createElement( 'div' );
          div.className = 'wp-test-custom-quick-tag';
          header.insertAdjacentElement( 'afterend', div );
          setContainer( div );
          clearInterval( interval );
        }
      }, 500 );
      return () => clearInterval( interval );
    }, [] );

    if ( ! container ) return null;

    const insertSnippet = ( html ) => {
      const editorCanvas = document.querySelector('iframe[name="editor-canvas"]');
      const doc = editorCanvas ? editorCanvas.contentDocument : document;
      const activeEl = doc.activeElement;

      if ( ! activeEl ) return;

      if ( activeEl.tagName === 'TEXTAREA' ) {
        const start = activeEl.selectionStart;
        const end = activeEl.selectionEnd;
        const value = activeEl.value;
        const newValue = value.substring(0, start) + html + value.substring(end);
        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
        nativeInputValueSetter.call(activeEl, newValue);
        activeEl.selectionStart = activeEl.selectionEnd = start + html.length;
        activeEl.dispatchEvent( new Event( 'input', { bubbles: true } ) );
      } else {
        try {
          wp.data.dispatch( 'core/block-editor' ).insertContent( html );
        } catch ( err ) {
          console.warn('Quick Tag: Failed to insert');
        }
      }
    };

    const handleMouseDown = ( e ) => e.preventDefault();

    // labelをエレメント表示
    const createBtn = ( label, snippet ) => {
      return wp.element.createElement( Button, {
        isSmall: true,
        variant: 'secondary',
        onMouseDown: handleMouseDown,
        onClick: () => insertSnippet( snippet )
      }, label );
    };

    return createPortal(
      wp.element.createElement(
        'div',
        { className: 'quick-tag-button-container' },
        
        /* 🔸 以下追加部 */
        /* SVG */
        /* <i class="" role="img" aria-label="読み上げ文字"></i>
         * aria-hidden="true" 読み上げない、非表示、テキストと重複の場合
         */
        // Android（bg-設定）
        createBtn( 
          wp.element.createElement( 'i', {
            className: 'icon-setup icon-bg android',
            role: "img",
            'aria-label': 'android'
          } ), 
          '<i class="icon-setup icon-bg android" role="img" aria-label="android"></i>' 
        ),
        // apple
        createBtn( 
          wp.element.createElement( 'i', {
            className: 'icon-setup apple',
            role: "img",
            'aria-label': 'apple'
          } ), 
          '<i class="icon-setup apple" role="img" aria-label="apple"></i>' 
        ),
        // apple-circle-gray
        createBtn( 
          wp.element.createElement( 'i', {
            className: 'icon-setup apple-circle-gray',
            role: "img",
            'aria-label': 'apple-circle-gray'
          } ), 
          '<i class="icon-setup apple-circle-gray" role="img" aria-label="apple-circle-gray"></i>' 
        ),
        // apple-gray
        createBtn( 
          wp.element.createElement( 'i', {
            className: 'icon-setup icon-bg apple-gray',
            role: "img",
            'aria-label': 'apple-gray'
          } ), 
          '<i class="icon-setup icon-bg apple-gray" role="img" aria-label="apple-gray"></i>' 
        ),
        // レンチアイコン
        createBtn( 
          wp.element.createElement( 'i', {
            className: 'icon-setup wrench',
            role: "img",
            'aria-label': 'レンチ'
          } ), 
          '<i class="icon-setup wrench" role="img" aria-label="レンチ"></i>' 
        ),

      ),
      container
    );
  };

  registerPlugin( 'my-quick-tag-plugin', { render: QuickTag } );
} )( window.wp );
COPY