web-dev-qa-db-ja.com

HTMLタグを使用して、メニュー項目の一部の単語のみを太字にします

次のようなメニューを取得するために、メニュー項目でHTMLタグを使用しようとしています。

親メニュー

  • 私の拳のサブメニューは太字
  • 2番目のサブメニューが強調されています

たとえば、メニュータイトルフィールドに<strong>タグを入力すると、ページを保存するときにタグが削除されます。

しかし、[b]My fist submenu[/b] is in boldと入力しても、[b]タグは削除されません。

Joomlaに[b]を<strong>タグで置き換えるように指示する方法はありますか？

joomla-3.xmenu-item
4
MagTun

ここにはいくつかのオプションがあります。

オプション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>')
});

お役に立てれば

6
Lodder

NoNumberのReReplacer（ http://www.nonumber.nl/extensions/rereplacer ）を使用して、各ページロードでそのようなものを置き換えることができます。ただし、この場合はお勧めしません。

これを解決する別のアプローチを提案できますか？メニュー項目のオプションで、[リンクタイプ]タブの[リンクCSSスタイル]を設定できます。そこにCSSクラスを追加し、代わりにこのクラスにフォーマットを適用します。 CSSクラスboldを追加して、テンプレートCSSファイルで次のように定義します。

.bold {
    font-weight:bold;
}

メニュー項目にHTMLを必要とせずに、これでうまくいくはずです。

10
Bakual

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

3
Faye

strongタグを使用してよろしいですか？

strongを使用してテキストを太字にすることはできません。 emタグも同様です。 emは、テキストの一部に（既読の）強調を適用してなく斜体フォントでレンダリングするために使用されます。メニュー項目のテキストの一部をより太いフォントで表示したい場合は、bの方がはるかに適しています。

ただし、メニュー項目のコンテンツを完全に制御するには、Joomla BambooのJBTypeプラグインをお勧めします。 http://www.joomlabamboo.com/joomla-extensions/jb-type-joomla-typography-plugin

これを使用すると、次のようにメニュータイトルを入力できます。

{jb_i}イタリック{/ jb_i}のメニューアイテム

そしてプラグインはemタグで出力をレンダリングします。

2
Seth Warburton

純粋な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;
}

enter image description here

私のスクリーンショットはそれを示しています：

  • 最初のサブメニューは太字です
  • 2番目のサブメニューはイタリックです
  • 3番目のサブメニューにはカスタムスタイルが適用されていません

これらのセレクターは、プロジェクトで「そのまま」機能する場合と機能しない場合があります。結果は、メニュー構造と他のサブメニューの意図したスタイルによって異なる場合があります。ブラウザの開発者ツールを使用して要素を検査し、適切なクラスと階層を決定して、目的の要素をターゲットにするだけです。

0
mickmackusa