ブログ用タグ: Twenty Twenty

「このページを共有する」dialogタグ版

iOS 15.4からSafariで<dialog>タグがサポートされたのを機に、「このページを共有する」機能をjQueryから<dialog>に移し替えた。

動作イメージ

ソーシャルメニューの 🔗 をクリックすると、下記のようなモーダルダイアログが表示される。[COPY]をクリックすると、ページ情報をクリップボードにコピーしてダイアログが閉じられる。[CANCEL]をクリックすると、ただダイアログが閉じられる。

ダイアログの出力 (PHP)

上記のダイアログは次のように出力した。

function echo_sharethis_dialog() {

    // 現在表示しているページのURL
    $url = $_SERVER['REQUEST_SCHEME'].'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

    // 現在表示しているページのタイトルと合わせてページ情報を生成
    $pageinfo = wp_get_document_title().PHP_EOL.$url.PHP_EOL;

    echo '
    <dialog id="lf-sharethis-dialog">
        <p><b>このページを共有する</b><br>（[COPY]でクリップボードにコピー）</p>
        <textarea id="lf-sharethis-area" readonly>',$pageinfo,'</textarea>
        <button id="lf-sharethis-btn-copy">Copy</button>
        <button id="lf-sharethis-btn-cancel">Cancel</button>
    </dialog>';
}

イベント処理 (JavaScript)

// ダイアログ
const shareThisDialog = document.getElementById( 'lf-sharethis-dialog' );

// ソーシャルメニューのアイコン（クリックしてダイアログを表示）
document.getElementsByClassName( 'lf-sharethis-menu' )[1].addEventListener( 'click', {
    object: shareThisDialog,
    handleEvent: function( e ) {
        this.object.showModal();
    }
} );

// グローバルメニュー（クリックしてダイアログを表示）
document.getElementsByClassName( 'lf-sharethis-menug' )[0].addEventListener( 'click', {
    object: shareThisDialog,
    handleEvent: function( e ) {
        this.object.showModal();
    }
} );

// Copy ボタン（共有ダイアログ内）
document.getElementById( 'lf-sharethis-btn-copy' ).addEventListener( 'click', {
    object: shareThisDialog,
    handleEvent: function( e ) {
        navigator.clipboard.writeText(
            document.getElementById( 'lf-sharethis-area' ).value
        );
        this.object.close();
    }
} );

// Cancel ボタン（共有ダイアログ内）
document.getElementById( 'lf-sharethis-btn-cancel' ).addEventListener( 'click', {
    object: shareThisDialog,
    handleEvent: function( e ) {
        this.object.close();
    }
} );

L5-10: Twenty Twenty テーマのソーシャルメニューの一つをクリックするとダイアログを表示する。メニュー項目には id 属性を割り当てることができず、class 属性しか割り当てられない。

L13-18: L5-10 と同様の処理をグローバルメニューについて行う。

L21-29: COPYボタンがクリックされたら、テキストエリアの内容をクリップボードに書き出してダイアログを閉じる。

L32-37: CANCELボタンがクリックされたらダイアログを閉じる。

JavaScriptを登録する

上記の JavaScript を登録する。ファイルの更新時刻をバージョン番号とすることで最新のファイルが読み込まれることを保証する。

function enqueue() {

    $jsfile = '/'.KH_PLUGIN_SLUG.'/js/lf_sitewide_setting.js';

    wp_enqueue_script(
        'lf_sitewide_setting',
        plugins_url( $jsfile ),
        array(),                            // No Dependency
        filemtime( WP_PLUGIN_DIR.$jsfile ), // Version
        true                                // In Footer
    );
}

上記の処理をアクションフックのコールバックとして登録する

上記の関数を一つのクラスにまとめた。


class LF_SiteWide_Setting {

    public static function init() {
        add_action( 'wp_enqueue_scripts', [ __CLASS__, 'enqueue' ], 11 );
        add_action( 'wp_footer', [ __CLASS__, 'echo_sharethis_dialog' ], 19 );
    }

    public static function enqueue() {
    }

    public static function echo_sharethis_dialog() {
    }
}

ダイアログのHTMLを書き出す関数は、’wp_footer’ へのコールバックとして優先順位19で登録した。これは、JavaScriptを書き出す処理（wp_print_footer_scripts()）が ‘wp_footer’ へのコールバックとして優先順位20で登録されているため、それよりも先に読み込ませるためである。

そして、個人的なカスタマイズをまとめたプラグインのメインPHPファイルから以下の要領で呼び出している。

LF_SiteWide_Setting::init();

2022-03-19

個別投稿の上部と下部に表示させる情報を選択する (TwentyTwenty)
個別投稿を表示させると、本文の上に著者名、投稿日、コメント数、固定表示マークが表示される。本文の下にはタグが表示される。これらの情報の表示の有無・位置・順序を調整する方法を調べた。

結論としては、順序はソースコードを修正しない限り変更しがたい。表示するかしないか、上部と下部のどちらに表示させるかは容易に設定できる。

表示処理は /inc/template-tags.php にある twentytwenty_get_post_meta() が司っていた。上部に表示させる項目は、下記のフィルターで調整できる。この例では投稿日時・タグ・固定表示マークを表示させている。
```
add_filter( 'twentytwenty_post_meta_location_single_top', 'lf_2020_post_meta_location_single_top', 10, 1 );
function lf_2020_post_meta_location_single_top ( $args ) {
	return array( 'post-date', 'tags', 'sticky' );
}
```
下部に表示させる項目は以下のフィルターを使う。この例では表示させていない。
```
add_filter( 'twentytwenty_post_meta_location_single_bottom', 'lf_2020_post_meta_location_single_bottom', 10, 1 );
function lf_2020_post_meta_location_single_bottom ( $args ) {
	return array();
}
```
2020-08-31