Question

wordpress新手，只是意识到当我注册一个新的侧边栏小部件时，WP会为它创建标记和css。我创建了一个ID为recentposts的小部件。

我还使用Widget CSS Classes Plugin将类名提供给仪表板中的小部件。以下是：http://imgur.com/a/A9HZH
这是wordpress版本（使用wordpress PHP dynamic_sidebar（）函数）：http://imgur.com/a/5xAes [IT DOESN＆＃39;使用我的CSS - 创建新标记]
这是我的非wordpress版本 - 应该是什么样的：http://imgur.com/a/h9Mx0
潜在的解决方案是做一个检查元素，找出wordpress html标记css / id并改变它，但似乎没必要。 默认情况下使用css为word press小部件设置样式的标准方法是什么？

问题：尝试使用我设计的css，这是我的两个小部件的版本（html和css样机）

HTML FOR RECENT POSTS（我的版本）

    <div class="recent-post-wrap">
        <h3 id="recent-post-headline">RECENT POSTS:</h3>
        <ul class="recent-posts">
            <a href="#"><li> 10 Reasons to Finish</li></a>
            <a href="#"><li> How to Win Clients</li></a>
            <a href="#"><li> Increase management effeciency</li></a>
            <a href="#"><li> 3 Tips to manage people</li></a>
            <a href="#"><li> Project Manegement 101</li></a>
        </ul>               
    </div>

CSS for RECENT POSTS（我的版本）

    /* RECENT POST */
    .recent-post-wrap {
        margin-top: 1rem;
        padding: 1rem;
        background-color: #f8f8f8;      
    }

    /* list */
    .recent-post-wrap ul {
        padding: 1rem;
    }
    .recent-post-wrap ul li {
        padding: 2%;
    }
    .recent-post-wrap a:hover {
        background-color: black;
    }


    #recent-post-headline {
        font-size: 1rem;
    }

现在这里是WORDPRESS版本 html（wordpress）

            <div class="recent-post-wrap">
            <h3 id="recent-post-headline">RECENT POSTS:</h3>
            <ul class="recent-posts">

                <?php 
                    // If the sidebar widget is active i.e. in the admin a widget is been created then show the dynamic sidebar in the markup otherwise waste of markup.
                        if(is_active_sidebar('recentpost')) { 
                            dynamic_sidebar('recentpost');
                        } 
                ?>

            </ul>               
        </div>

编辑：WordPress的HTML输出

<div class="recent-post-wrap">
            <h3 id="recent-post-headline">RECENT POSTS:</h3>
            <ul class="recent-posts">

                        <li id="recent-posts-3" class="widget widget_recent_entries">       <h2 class="widgettitle">Recent Posts</h2>
    <ul>
                <li>
            <a href="http://localhost/wordpress/2017/07/30/asdfads/">asdfads</a>
                    </li>
                <li>
            <a href="http://localhost/wordpress/2017/07/29/blog-post-two/">Title 2</a>
                    </li>
                <li>
            <a href="http://localhost/wordpress/2017/07/29/how-to-manage-your-team-effectively/">TITLE 1</a>
                    </li>
            </ul>
    </li>

            </ul>               
        </div>

使用自定义CSS自定义WordPress小部件？

0 个答案: