現在、このブログの記事は「Classic Editor」上で、「JP Markdown」を使って編集しているのですが、時々、MediawikiImboxのような枠を貼りたいな、と思うことが多く、いろいろ思案しているうちに、ショートコードなるものを作ればいいのではないかと思い、久しぶりにfunction.phpを編集してみました。

function imbox( $attrs, $content = null ) {
    extract( shortcode_atts( array(
        'fatype' => 'none',
    ), $attrs ) );

    $faicon = "";
    switch($fatype) {
        case "warn":
        case "important":
            $faicon = '<i class="fas fa-exclamation-circle"></i>';
            break;
        case "info":
            $faicon = '<i class="fas fa-info-circle"></i>';
            break;
        case "note":
            $faicon = '<i class="fas fa-lightbulb"></i>';
            break;
        default:
            $faicon = "";
    }

    return '<div class="imbox-wrapper"><table class="imbox imbox-content" style="margin:4px 2%;width: auto;">’
        . ’<tbody><tr><td class="imbox-image">' . $faicon . '</td><td class="imbox-text">'
        . $content . '</td></tr></tbody></table></div>';
}

add_shortcode('imbox', 'imbox');

コードを見ていただければわかるように、Font Awesomeのフリーなアイコンを使用しています。

<head></head>にリンクを貼るために、Head,Footer and Post Injectionsというプラグインを導入して、Font AwesomeのFree CDNのリンクを貼り付けています。

さらに、テーマに追加のCSSを追加します。

table.imbox-content {
    border : 3px solid grey;
}

table.imbox {
    background: #232323;
}

table.imbox td,
table.imbox th {
    text-align: left;
}

td.imbox-image {
    border: none;
    padding : 2px 0 2px 0;
    text-align: center;
    font-size: 140%;
}

td.imbox-text {
    border: none;
    padding: 0.25em 0.9em;
    width: 100%;
}

ほぼ、ベタにImboxのコードままです。

これで、

[imbox]シンプルなボックス[/imbox]
シンプルなボックス

 

[imbox fatype="info"]情報アイコンつき[/imbox]
情報アイコンつき

 

[imbox fatype="warn"]エクスクラメーションマークつき[/imbox]
エクスクラメーションマークつき

 

[imbox fatype="note"]ヒントマーク付き[/imbox]
ヒントマーク付き

 

みたいな感じに出力できます。

作りは簡単で雑ですが、当分これを使いそうです。


 
記事を共有する
カテゴリー: Wordpress

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。