web-dev-qa-db-ja.com

ウィジェットのコンテンツをdivで囲む、またはウィジェットのタイトルを外部に取得する方法

このように、ウィジェットのタイトルをウィジェットの領域外に取得する方法はありますか。

<ul>
   <li>
      <h2 class="widgettitle">The title here</h2>
      <div class=""widget>
         <!-- any markup here -->
      </div>
   </li>
</ul>

これの代わりに:

<ul>
   <li>
      <div class=""widget>
      <h2 class="widgettitle">The title here</h2>
         <!-- any markup here -->
      </div>
   </li>
</ul>

唯一の理由は、タイトルをウィジェットの上に置き、すべての.widget要素にパディングを適用したいのですが、スタイルを使用して解決することを試みましたが、タイトルにマイナスのマージンが必要でした最初の例のようにマークアップ付きのサイドバーを作成しますか?

それができなければ、タイトルなしのコンテンツをdivで囲む方法はありますか?このような

<ul>
   <li>
      <div class=""widget>
      <h2 class="widgettitle">The title here</h2>
         <div class="widgetcontent">
            <!-- any markup here -->
         </div>
      </div>
   </li>
</ul>

そして事前に感謝します。

4
Pierre

これは、このようなタイトルの後にコンテンツをラップするための解決策です。

'before_widget' => '<li>',
'after_widget'  => '</div></li>',
'before_title'  => '<h2 class="widgettitle">',
'after_title'   => '</h2><div class="widgetcontent">' ); ?>

重要なマークアップは、after_title内の<div class="widgetcontent>"、およびafter_widget内の閉じた</div>です。これは、このHTMLマークアップになります。

<ul>
   <li>
     <h2 class="widgettitle">Title</h2>
     <div class="widgetcontent">
        <!-- widget stuff-->
     </div>
   </li>
</ul>
3
Pierre

あなたがやりたいことをやり遂げるためにウィジェットのコードを使うことができるはずです。このページを読む ウィジェットapi

このページでは、ウィジェットのコーディング方法と、before_widgetとafter_widgetを使用してウィジェットの前後に必要なものを配置する方法を説明します。

0
Jamie