2014-02-18 150 views
0

我需要爲每個li類添加相同的圖標,這些圖標是由Im腳本在WordPress自定義小部件中使用的一個PHP腳本自動生成的。PHP:將html圖標添加到腳本

這是我在一個wordpress小部件中使用的腳本來顯示一些子頁面。

<?php 
$ancestor_id=24; 
$descendants = get_pages(array('child_of' => $ancestor_id)); 
$incl = ""; 

foreach ($descendants as $page) { 
if (($page->post_parent == $ancestor_id) || 
    ($page->post_parent == $post->post_parent) || 
    ($page->post_parent == $post->ID)) 
{ 
    $incl .= $page->ID . ","; 
} 
}?> 

<ul> 
    <?php wp_list_pages(array(
         "child_of" => $ancestor_id, 
         "include" => $incl, 
         "link_before"  => "", 
         "title_li" => "", 
         "sort_column" => "menu_order"));?> 
</ul> 

的圖標(已一類asigned),我需要使用的代碼..

<img class='sideicons' src="http://accountabletest.com/wp-content/uploads/2013/12/iconSidebar1.jpg" alt="" > 

如何使生成包括相同的圖標每個<li>

回答

2

使用CSS,你需要的規則list-style-typelist-style-icon

0

聽起來像在PHP中做它可能會比它的價值更麻煩...如何JavaScript或jQuery的?

$('li').each(function(i,el){ 
    $(this).prepend('<img src="path/to/image.ico" />'); 
}) 

如果您需要更改圖像的現有來源,像$('li img')

變化.prepend()靶向attr('src','your/new/image.jpg')

+0

與CSS就解決了。無論如何謝謝你@kcdwayne – Gonpires

0

爲什麼你不使用CSS?這是更簡單的方法。只需將一個類分配給您的ul並將一個背景圖像添加到li標籤。

喜歡:

<ul class="list"> 
    <?php wp_list_pages(
     array(
      "child_of" => $ancestor_id, 
      "include" => $incl, 
      "link_before" => "", 
      "title_li" => "", 
      "sort_column" => "menu_order" 
     ) 
    );?> 
</ul> 


<style> 
    ul.list li { 
     background: url(http://accountabletest.com/wp-content/uploads/2013/12/iconSidebar1.jpg) no-repeat left center; 
     padding-left: 10px; 
    } 
</style>