2016-08-09 9 views
2

私は作成しているすべてのカスタムウィジェットにモバイルウィジェットとデスクトップウィジェットのための手段を提供していますので、ウィジェットがバックエンドのウィジェットエリアのタイトルにモバイル/デスクトップであるかどうかを示すことをお勧めしますこのセクションをより使いやすくするために役立ちます。AdminエリアでWordpress Widgetsのタイトルバーを編集する方法はありますか?

ウィジェットのタイトルバー(ウィジェットのタイトルの左側)に画像をロードしたり、モバイル/デスクトップのアイコンを表示して、どのアクティブなウィジェットがデスクトップであるかを識別できるフィルタはありますか?どのアクティブなウィジェットがモバイルであるのか、ウィジェットのオプションを見るためにウィジェットを開く必要はありませんか?

バックエンド管理者widgets.phpページでのみこれをキャプチャするためのワードプレスのどこかにフックがありますか?ページが読み込まれるときにPHPフックを使いたいですか? jQueryをモバイルからデスクトップへ、またはその逆の場合に既に使用しています。これは、私がこれを行う必要があるウィジェットページの最初の読み込みです。

可能ですか?

以下の例は、可能であれば、初期のwidgets.phpページ内で行うことができますが、内部からWP_Widgetsクラスファイルを簡単に読み込むことができますか?またはフィルター、アクション、等...

enter image description here

だから、私はWP_Widgetを拡張Widgetクラス内でこのように次の操作を行うことを試みてきました:だから

function __construct() { 

     parent::__construct(
      'social_media_widget', 
      __('Social Media Widget', 'mydomain') 
     ); 

     add_filter('dynamic_sidebar_params', array($this, 'my_sidebar_params'), 10, 1); 

    } 

    function my_sidebar_params($params) { 

     $sidebar_id = $params[0]['id']; 

     if (is_admin() && $params[0]['widget_name'] == 'Social Media Widget') 
     { 
      $_widget = get_option('widget_social_media_widget'); 

      if (!empty($_widget) && isset($_widget[$params[1]['number']])) 
      { 
       // $platform is being set in here as "desktop" because if I do a var_dump, it gives me "desktop", however, the image is not showing in the titlebar using before_title below... why? 
       $platform = isset($_widget[$params[1]['number']]['platform']) ? $_widget[$params[1]['number']]['platform'] : ''; 
      } 

      if (!empty($platform)) 
      { 
       $params[0]['before_title'] = '<img src="' . get_stylesheet_directory_uri() . '/img/' . $platform . '-icon.png" alt="' . $platform . ' menu" class="menu-icon ' . $platform . '-icon" />'; 
      } 
     } 
    return $params; 
} 

を、$プラットフォームです今は正しい値ですが、管理ウィジェットエリアのタイトルバーのタイトルの前にイメージが添付されていないので、なぜ表示されないのか分かりません... $params[0]['before_title']が表示されますが、正しい場所。可能であれば、ウィジェットのタイトルの<h3>タグ内に表示するイメージが必要です。何か案は?

答えて

1

あなたはWPコードをスヌープした場合、あなたは2つのことが表示されます:

  1. ワードプレスは、あなたのイメージが削除なっている理由であるタイトル、外のタグを除去していること。これは、WPコア・ファイル「widgets.php」からです:

    ​​
  2. にはフック、アクション、またはフィルタが存在しないことをあなたがそれらを操作することができるようにします。

だから、あなたは創造的にする必要があります。

1つの方法は、ウィジェットのIDを活用しようとすることです。しかし、WPコードは意図的にIDを管理しているため、同じウィジェットが複数回追加されていても、それらを一意に管理するため、ややこしいことです。だから、

、あなたがこれを処理することができるかもしれない方法の例として、「最近の-コメント」ウィジェットを見てみましょう:

インタフェースに示した第1の「最近の-コメント」ウィジェットのIDがwidget-17_recent-comments-2あり、 2番目の「最近のコメント」ウィジェットのIDはwidget-9_recent-comments-3などです。あなたはそのアイデアを得ます。

recent-commentsと言う作品を活用しましょう。

これを行うには、「funner」CSSセレクタのいくつか、つまりcontainsセレクタを利用する必要があります。この場合、[id*="_recent-comments-"]をお勧めします。 _と終了-に特別な注意を払う - これはあなたのスタイルがセレクタの一部を含む可能性のある他のウィジェットに適用されないようにするのに役立ちます。

情報の小さな作品で、我々は今、背景として、当社のh3に表示する画像を取得することができます:

div[id*="_recent-comments-"] h3 { 
    color: red; /* if you want to manipulate the title color */ 
    padding-left: 35px; /* to create some space for our image */ 
    /* obviously adjust this as needed */ 
    background: transparent url(http://placehold.it/20x20) 5px center no-repeat; 
    /* your other styles here ... */ 
} 
+0

おかげで、 '$インスタンス[「プラットフォーム」]に依存して異なる画像があります'value、それで私は次のようにecho'dします:' '' . $platform . ' menu '' div内で、 '$ params'に適用するのではなく、エコーがウィジェットの直前にあるので、jQueryを使って、 div要素のhtmlを取得してwidget_title内に置くよりも、 '$(this)).remove()'を削除するよりも、$(this).next( '。widget') '完成しました。ありがとう:) –

関連する問題