現在、このブログの記事は「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 = '';
            break;
        case "info":
            $faicon = '';
            break;
        case "note":
            $faicon = '';
            break;
        default:
            $faicon = "";
    }

    return '
’ . ’
' . $faicon . '' . $content . '
'; } 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のコードままです。

これで、

シンプルなボックス
シンプルなボックス
情報アイコンつき
情報アイコンつき
エクスクラメーションマークつき
エクスクラメーションマークつき
ヒントマーク付き
ヒントマーク付き

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

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


0件のコメント

コメントを残す

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