WordPress 小部件：如何更改周围 HTML 的自动创建的 "style" 属性

Question

我已经复制了第二十三个 Wordpress 主题，以深入研究 Wordpress 开发。我想改变我的页脚的外观，所以我使用 Firefox 检查器来玩弄它。我的页脚侧边栏中的小部件周围有以下 HTML：

<aside style="position: absolute; left: 0px; top: 0px;" id="text-5" class="widget widget_text masonry-brick">
    <div class="textwidget">
        <p>My text content</p>
    </div>
</aside>

我想摆脱 "position: absolute" CSS 指令，但我找不到将样式属性添加到小部件的 HTML 代码的位置。使用的主题 functions.php 中的小部件定义根本不包含样式属性：

function twentythirteen_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Widget Area', 'twentythirteen' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Appears in the footer section of the site.', 'twentythirteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">', // no style attribute...
        'after_widget'  => '</aside>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
// ...

现在我想知道这 "magic" 发生在哪里，以便我可以阻止它。我禁用了所有相关插件，但这并没有改变任何东西。我也浏览了主题的文件，但我什么也没看到，是我错过了吗？我以为我可以在管理面板的小部件设置页面上更改周围的 HTML，但我找不到这样的选项。

Answer 1

Wordpress 正在使用 hooks 开发主题和插件。钩子是过滤事件的元素。示例：当通过浏览器进入网站时，将触发 init 操作。

add_action('init', 'your_function');

您贴出的代码可能是wordpress开发的错误入口。因为它是主题的风格，我认为你不能用这样的钩子来编辑它。

也许它位于您主题下的 css 文件夹中。

进入 Wordpress 开发的一个好习惯可能是创建您的第一个插件。

Answer 2

通常，您可以为样式表中的元素设置更高的优先级 (!important) 或使用稍后的内联样式命令覆盖内联样式，例如在其后运行的 javascript。

但是，在这种情况下，内联样式来自 'jquery-masonry' jquery 插件，因此在这里更改内联样式不是一个好主意。如果你想删除它，你需要禁用'jquery-masonry'。你可以使用 wp_dequeue_script:

function wpdocs_dequeue_script() {
   wp_dequeue_script( 'jquery-masonry' );
}
add_action( 'wp_print_scripts', 'wpdocs_dequeue_script');

将其放入您的 function.php 文件中（因为您使用 'twentythirteen' 主题作为父主题，如果您还没有创建子主题，则需要创建子主题），然后您可以使用元素的 class / id 以更改 style.css 文件中的样式。

WordPress 小部件：如何更改周围 HTML 的自动创建的 "style" 属性

WordPress widgets: how to change the automatically created "style" attribute of the surrounding HTML

wordpress

wordpress-theming

widget