現在、このブログの記事は「Classic Editor」上で、「JP Markdown」を使って編集しているのですが、時々、MediawikiのImboxのような枠を貼りたいな、と思うことが多く、いろいろ思案しているうちに、ショートコードなるものを作ればいいのではないかと思い、久しぶりに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]| ヒントマーク付き |
みたいな感じに出力できます。
作りは簡単で雑ですが、当分これを使いそうです。
0件のコメント