Question

我需要为每个li类添加相同的图标，这些图标是由我在Wordpress网站的自定义窗口小部件中使用的PHP脚本自动生成的。

这是我在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>

我需要使用的图标代码（已经是一个已签名的类）是..

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

如何让生成的每个<li>包含相同的图标？

Answer 1

使用css，您需要的规则是list-style-type和list-style-icon

Answer 2

在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')

Answer 3

为什么你不使用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>

PHP：将html图标添加到脚本中

3 个答案: