web-dev-qa-db-ja.com

バックエンドウィジットリストのアイテムを個別にスタイル設定できますか？

UPDATE質問を控えました

バックエンドウィジェットページwidgets.phpに、利用可能なウィジェットのリストがあります。このリストの項目は同じクラスと 動的に生成されたID を持ちます。これは新しいウィジェットがリストに（アルファベット順に）挿入されると変わります。そのため、リスト内の個々の項目にcssを送信するための信頼できる方法はありません。

ウィジェットリスト内の個々の項目にスタイルを設定する別の方法はありますか？

古くてより狭い質問

そのフルネームに フォントアイコン を含むテーマがあります。これはグローバルに次のように定義されています。

$theme_data      = wp_get_theme(); // Retrieves the theme data from style.css
$theme_name      = $theme_data['Name'];
$theme_icon      = '<i class="fa fa-wrench" style="font-family:FontAwesome;"></i>';
$theme_full_name = $theme_icon . ' ' . $theme_name;

私は$theme_full_nameをメニューやページタイトルなどに使うことができます。ただし、例外が1つあります。テーマには2つのウィジェットが含まれており、それらのウィジェットの名前にも$theme_full_nameがあります（コンストラクターの2番目のパラメーター）。管理者のwidgets.phpページにはテーマ名のみが表示されます。どうやらアイコンが削除されているようです（おそらく、ウィジェット名に含まれている可能性があるすべてのHTML）。

ウィジェット名にフォントアイコンを保持する方法はありますか？

plugin-developmenttheme-developmentwidgetswp-admin
1
cjbj

コメントで@MarkKaplun が を述べたように、CSSでも可能です。 Javascriptでも。

CSSアプローチ

例として、カレンダーウィジェットを見てみましょう。

使用可能なウィジェットリスト内のウィジェットのidは、次の形式になります。

widget-{integer}_calendar-__i__

サイドバーでは：

widget-{integer}_calendar-{integer}

ウィジェットのタイトルの前に カレンダーダッシュ を表示する場合は、次のようにします。以下のようにして、widgets.phpファイルのカスタムスタイルシートをエンキューします。

div[id*="_calendar-"].widget .widget-title h3:before{ 
    content: "\f145"; font-family: dashicons; margin-right: 0.5rem; 
}

ここでは*=を使ってidセレクタ内の部分文字列の一致を見つけます。

これは次のように表示されます。

calendar

必要ならば、これをさらに右または左の部分に制限することができます。

#widgets-right
#widgets-left

または利用可能なウィジェット：

#available-widgets

一般的なスタイルシートに必要な場合は、widgets.phpページにもbody.widgets-phpがあります。

4
birgire