次のようなメニューを取得するために、メニュー項目でHTMLタグを使用しようとしています。
親メニュー
たとえば、メニュータイトルフィールドに<strong>
タグを入力すると、ページを保存するときにタグが削除されます。
しかし、[b]My fist submenu[/b] is in bold
と入力しても、[b]
タグは削除されません。
Joomlaに[b]
を<strong>
タグで置き換えるように指示する方法はありますか?
ここにはいくつかのオプションがあります。
オプション1 @Bakualが推奨することを実行します。私はReReplacerを使ったことはありませんが、この拡張機能は非常に人気が高く評価されている開発者によって開発および保守されているため、うまく機能するはずです。
オプション2:
小さなプラグインを開発してメニュー項目をターゲットにし、次のようなものを使用して[b]
を<strong>
タグに置き換えます。
$item = //code to get menu items
$tag = array(
'/\[b\](.*?)\[\/b\]/is',
);
$replace = array(
'<strong>$1</strong>',
);
$output = preg_replace($tag, $replace, $item);
オプション
追加できる最愛のjQueryメソッドは推奨されるメソッドではありませんが、mightが最も簡単です。これに似たもの:
$('.nav li a').html(function (i, html) {
return html.replace(/(\w+\s\w+\s\w+)/, '<strong>$1</strong>')
});
お役に立てれば
NoNumberのReReplacer( http://www.nonumber.nl/extensions/rereplacer )を使用して、各ページロードでそのようなものを置き換えることができます。ただし、この場合はお勧めしません。
これを解決する別のアプローチを提案できますか?メニュー項目のオプションで、[リンクタイプ]タブの[リンクCSSスタイル]を設定できます。そこにCSSクラスを追加し、代わりにこのクラスにフォーマットを適用します。 CSSクラスbold
を追加して、テンプレートCSSファイルで次のように定義します。
.bold {
font-weight:bold;
}
メニュー項目にHTMLを必要とせずに、これでうまくいくはずです。
Maximenu CKを使用したことがありますか? http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/11578
それはおそらく必要ないだろう追加の機能をたくさん持っていますが、あなたはそれをあなたがCSSを自分でスタイリングできるようにストリップスタイルに設定することができます。とにかく、これのクールな部分は、パイプブレークでメニュー項目テキストを区切ることができ、パイプの後に来る半分にクラスを自動的に追加します。
マイメニュー||アイテム
次に、「マイメニュー」セクションに必要なものと一致するように全体をスタイルし、「アイテム」セクションに適用されているクラスを使用してそれらのスタイルをオーバーライドします。
非常に便利。ちなみに、Maximenuには、モバイルメニューの統合、説明フィールド、その他いくつかのクールなオプションもあります。
モバイルプラグインはここにあります: http://extensions.joomla.org/extensions/extension-specific/extensions-specific-non-sorted/22662
strong
タグを使用してよろしいですか?
strong
を使用してテキストを太字にすることはできません。 em
タグも同様です。 em
は、テキストの一部に(既読の)強調を適用してなく斜体フォントでレンダリングするために使用されます。メニュー項目のテキストの一部をより太いフォントで表示したい場合は、b
の方がはるかに適しています。
ただし、メニュー項目のコンテンツを完全に制御するには、Joomla BambooのJBTypeプラグインをお勧めします。 http://www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin
これを使用すると、次のようにメニュータイトルを入力できます。
{jb_i}イタリック{/ jb_i}のメニューアイテム
そしてプラグインはemタグで出力をレンダリングします。
純粋なcssソリューションとして、nth-of-type()
を使用してサブメニュー項目をターゲットにすることができます。
私のローカルテストでは、これらのセレクターは私のために働きました:
li.deeper > ul.nav-child > li.deeper:nth-of-type(1) > a {
font-weight: bold;
}
li.deeper > ul.nav-child > li.deeper:nth-of-type(2) > a {
font-style: italic;
}
私のスクリーンショットはそれを示しています:
これらのセレクターは、プロジェクトで「そのまま」機能する場合と機能しない場合があります。結果は、メニュー構造と他のサブメニューの意図したスタイルによって異なる場合があります。ブラウザの開発者ツールを使用して要素を検査し、適切なクラスと階層を決定して、目的の要素をターゲットにするだけです。