wordpress – WPP

WordPress の “Highlighting Code Block” で対応言語を追加する。

このブログのコードブロックでは “Highlighting Code Block” というプラグインを使っています。

がデフォルトで対応する言語はあまり多くありません。公式の説明では追加方法がわかりにくかったので調べてみまみました。

「ひいらぎナレッジ倉庫」さんのサイトによると新しく対応したい言語を追加したバージョンの Prism.js /Prism.css を追加する必要がありそうです。

ダウンロードとワードプレスへのアップロード

WordPress で [設定] – [[HCB] 設定] に進み、ヘルプの「こちら」へリンクに進みます。
Prism のダウンロードページが開くので、必要な言語をチェックしていきます。
ページの下に進み、.js をダウンロードします。(.css は自分の環境では必要なさそうでした。)
[HCB] 設定の [独自 Prism.js] フォルダの指し先に合うようにファイルをアップロードします。
今回は [FQDN]/[ワードプレストップ]/wp-content/theme/[使用中のテーマ]/prism/prism.js
になる場所にアップロードしました。
4. に合わせて [独自 Prism.js] にパスを指定します。
[変更の保存] をクリックします。

対応言語の追加

今回は、XML と Kotlin を追加します。

同じく [HCB] 設定の [使用する言語セット] に以下の行を追加します。もともとの末尾に , がない場合はエラーになるので末尾に追加します。(PHP のハッシュや配列の場合、最後の要素に , が付いていてもエラーにならないので最初からつけておいたほうが簡単です。)

Kotlin: “Kotlin”,
xml: “XML”

これで、 Kotlin と XML を選択してハイライトできるようになった。

参考

Highlighting Code Blockで対応言語を追加する方法 | ひいらぎナレッジ倉庫

WordPress テーマ DecorMe のリストを少し修正

この WP サイトでは Burger Themes というサイトの DecorMe の無料版を使っていますが、番号付きリストに変な黄色い■形が表示されていることに気づきました。

ブラウザでインスペクトしてみると ■形は li の :before で表示しているようです。 ul も ol も指定がないので両方の箇条書き要素にあたってしまっているようです。実際の CSS はこうなっていました。

.post-items li:before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--bs-primary);
    margin-right: 18px;
    display: inline-block;
    vertical-align: 3px;
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 4px;
}

これの content 属性で文字の装飾として■形が表示されているようです。

li の前に ul を入れて番号なし箇条書きの時のみに当たるようにしてみます。さらに ol の時は表示しないようにします。

WordPress の管理画面で[外観] >[カスタマイズ] と進み、 [追加CSS] の画面で以下を投入します。

これだけで OK かと思いましたが、 ul が左へはみ出すので padding-left も追加します。

.post-items ul li:before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--bs-primary);
    margin-right: 18px;
    display: inline-block;
    vertical-align: 3px;
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 4px;
}

.post-items ol li:before {
    content: initial;
}

/* ul に左padding 指定 */
.post-items ul {
	padding-left: 1rem;
}

これでよさそう。

wordpress の投稿画面のタイトルフォントが大きすぎ

このエントリは完全な独り言です。

このブログは wordpress 使用しているのですが、投稿画面のタイトルのフォントがバカでかくていつも閉口しています。あ、多分ブロックエディタっていうの? WYSWYG っぽい画面です。普通はこんなことにならないのか ? みんなどうしているのか ?

検索してみると子テーマを作るのが王道っぽい。直接 function.php を書き換えるのが簡単だけど邪道ってことなのか。めんどくさ。

便利ではあるけどいちいち面倒なのが wordpress の嫌いなところ。なやましい。次は子テーマのメモかな。