【HABONE】の機能の１つである任意の文字列に対する装飾機能を追加する方法を紹介します。

色付きの下線、マーカー表示、一部の文字列のフォントサイズを変更したい場合に設定してお使いください。

なお、本方法では以下の表現が追加できます（【HABONE】バージョン1.0の機能です）。

• 任意の文字にアンダーラインを引く（赤・青・黄）
• 任意の文字に背景色（マーカー）を付ける（赤・青・黄）
• 任意の文字を拡大する（1.2倍または1.5倍）

本機能により、以下のような装飾ができるようになります。

本記事を参考にWordPressサイトのカスタマイズをお考えの方へ

このカスタマイズ内容は、当サイトで配布している【HABONE BASE】テーマへ、上位バージョンの【HABONE】テーマの機能の一部を追加するための参考記事です。

テーマによってプログラムの書き方や構成が異なりますし、デザイン要素も異なりますので、特に【HABONE BASE】以外のテーマへの適用を行う場合には、以下のスキルが必要となります。

• カスタマイズで不具合が発生した場合にご自身で復旧が可能なこと
• FTPクライアントツールやサーバーのファイルマネージャーなどを使ってファイルの転送などが行えること
• テーマファイルの編集を行った経験があること
• ご自身でデザインの修正や調整ができること

また、【HABONE BASE】へ追加する場合には、子テーマでのカスタマイズをおすすめします。

ページ上部へ戻る▲

文字列装飾機能の追加方法

１．必要なファイルを作る

パソコン上でテキストエディタを開き、以下のコードをコピーして「edit_ritchtext.js」として保存します。

(function () {
	const { Fragment, createElement } = wp.element;
	const { registerFormatType, toggleFormat } = wp.richText;
    const { RichTextToolbarButton, RichTextShortcut, BlockFormatControls } = wp.editor;
const { __ } = wp.i18n; 
    const { Fill, Slot, Toolbar, ToolbarButton, DropdownMenu } = wp.components;
    const { displayShortcut } = wp.keycodes;
    const { orderBy } = lodash;
 
    const el = createElement;
 
    function HaboneRichTextToolbarButton( { name, shortcutType, shortcutCharacter, ...props } ) {
        let shortcut;
        let fillName = 'HaboneToolbarControls';
        
        if ( name ) {
            fillName += `.${ name }`;
        }
        
        if ( shortcutType && shortcutCharacter ) {
            shortcut = displayShortcut[ shortcutType ]( shortcutCharacter );
        }
        
        return (
            el( Fill, 
                { name: fillName },
                el( ToolbarButton,
                    props,
                    { shortcut: shortcut }
                ),                  
            )  
        );
    };
 
    //専用のドロップダウン用ボタンとメニューを登録
    registerFormatType( 'habone/dropdown', {
        title: 'buttons',
        tagName: 'dropdown',
        className: null,
 
        edit( { isActive, value, onChange } ) {
            return (
                el( BlockFormatControls, 
                    {},
                    el( 'div', 
                        { className: 'editor-format-toolbar block-editor-format-toolbar' },
                        el( Toolbar, 
                            {},
                            el( Slot, 
                                { name: 'HaboneToolbarControls' },
                                (fills) => {
                                    return ( fills.length !== 0 &&
                                        el( DropdownMenu, 
                                            { icon: 'pets',
                                              label:'テキスト装飾',
                                              hasArrowIndicator: true,
                                              position: 'bottom left',
                                              controls : orderBy( fills.map( ( [ { props } ] ) => props ), 'title'),
                                            }
                                        )
                                    );
                                }
                            )
                        ),   
                    )
                )
            );
        }
    });
//装飾の追加
const tagTypes = [];
	//マーカー
	tagTypes.push({ tag: 'mark', class: 'style-ymark', title: 'マーカー　黄', icon: 'edit' });
	tagTypes.push({ tag: 'mark', class: 'style-bmark', title: 'マーカー　青', icon: 'edit' });
	tagTypes.push({ tag: 'mark', class: 'style-rmark', title: 'マーカー　赤', icon: 'edit' });


	//アンダーライン
	tagTypes.push({ tag: 'mark', class: 'style-yuline', title: '下線　黄',icon: 'edit' });
	tagTypes.push({ tag: 'mark', class: 'style-buline', title: '下線　青',icon: 'edit' });
	tagTypes.push({ tag: 'mark', class: 'style-ruline', title: '下線　赤',icon: 'edit' });

	//拡大文字
	tagTypes.push({ tag: 'span', class: 'large-font-two', title: '文字 1.2倍', icon: 'edit' });
	tagTypes.push({ tag: 'span', class: 'large-font-five', title: '文字 1.5倍', icon: 'edit' });
 
    tagTypes.map( (idx) => {
        let type = 'habone/richtext-' + idx.tag;
        if(idx.class !== null){
            type += '-' + idx.class;
        }
        registerFormatType( type, {
            title: idx.title,
            tagName: idx.tag,
            className: idx.class,
 
            edit( { isActive, value, onChange } ) {
                return (
                    el( Fragment,
                        {},
                        // RichTextToolbarButton から HaboneRichTextToolbarButton へ登録先変更
                        el( HaboneRichTextToolbarButton,
                            { icon: idx.icon,
                              title: idx.title,
                              isActive: isActive,
                              onClick: () => onChange( toggleFormat(value, { type: type })),
                            }
                        )
                    )
                );
            },
        });
    }) 
    
}());

もう１つパソコン上で、以下のコードをコピーして、「richtext-style.css」として保存します。

/***** 下線 *****/
mark.style-buline {
	background: linear-gradient(transparent 70%, #97ccff 75%);
}

mark.style-yuline {
	background: linear-gradient(transparent 70%, #ffff84 75%);
}

mark.style-ruline {
	background: linear-gradient(transparent 70%, #ff66c9 75%);
}

/***** マーカー *****/
mark.style-ymark{
	background: linear-gradient(transparent 0%,#ffff84 0%);
}

mark.style-bmark{
	background: linear-gradient(transparent 0%,#97ccff 0%);
}

mark.style-rmark{
	background: linear-gradient(transparent 0%,#ff66c9 0%);
}

/***** 文字拡大 *****/
.large-font-two {
	font-size: 1.2em;
}

.large-font-five {
	font-size: 1.5em;
}

作成した２つのファイルを「editor-extend」というフォルダへまとめておきます。

２．サーバー（子テーマフォルダ内）へ転送する

１で作成した、「editor-extend」フォルダを子テーマ内へアップロードします。

３．機能を有効化する

子テーマのfunctions.phpへ以下のコードを追加して機能を有効化します。

/***** 文字装飾 *****/
function habone_ritchtext_init() {
    wp_enqueue_style( 'habone-richtext-style', get_stylesheet_directory_uri() . '/equip/editor-extend/richtext-style.css');
    if(is_admin()){
        wp_enqueue_script( 
            'habone-richtext-js',
            get_stylesheet_directory_uri() . '/equip/editor-extend/edit_ritchtext.js',
            array( 'lodash', 'wp-rich-text','wp-element','wp-components', 'wp-blocks', 'wp-editor', 'wp-keycodes'),
            null,
            true 
        );
    }
}
add_action( 'enqueue_block_editor_assets', 'habone_ritchtext_init' );
add_action( 'wp_enqueue_scripts', 'habone_ritchtext_init' );

４．機能をテストする

３までが問題なく完了したら、投稿の追加（編集）画面を表示し、段落ブロック等に適当な文字をいれてください。以下の画面のように、「猫足」のマークが表示されるようになっているはずです。

何文字かを選択した状態で、猫足マークをクリックし、何かの装飾を加えてみてください。以下のように装飾が反映された状態になります。

編集画面上で反映されたのを確認できたら、一度下書き保存等を行ってから、プレビューで閲覧画面上へも反映されているかを確認ください。

「猫足」ボタンが追加されていない場合には、機能の適用方法が誤っているか、スクリプトがリフレッシュされていない可能性があります。後者の場合は、編集画面を開いた状態でキーボードの「Ctrl」＋「F5」を押してリフレッシュしてみてください。前者の場合は今一度設置手順を確認ください。