如何為 WordPress 中的所有標題元素添加自定義屬性？

Question

如何將標題標簽<h1>更改為<h1 data-splitting>和<h2>更改為<h2 data-splitting>和<h3>更改為<h3 data-splitting>和<h4>更改為<h4 data-splitting> WordPress？

如何通過硬編碼或通過 JS/JQuery 更改在所有頁面上更改它們？ （我的頁面被 Cloudflare CDN 完全緩存）

對於硬編碼，我應該在哪里查看主題文件，還是將其編碼到 WordPress 本身？

有 ID 和類，例如<div id="nav">和<div class="sidebar-box">但上述類型稱為什么？ 和<h2> + <data-splitting>一樣嗎？

這是為標題添加一些動畫效果所必需的 -在 Codepen 上查看

現在如何更改標題標簽？

我將此添加到 WordPress fuctions.php 中：-

 function enqueue_my_custom_script() {
    wp_enqueue_script( 'hjs', 'https://example.com/h.js', false );
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

h.js 具有以下代碼：-

$('document').ready(function() {

    $('h1, h2, h3, h4').attr('data-splitting', '');

});

但這不會將腳本添加到頭部。

我什至將它手動添加為<script async src="https://example.com/h.js">但它並沒有出現在腦海中。

所以我已將 JS 文件作為內聯腳本添加到頭部，現在腳本確實在頭部顯示為內聯 JS ，但不會將<h1>更改為<h1 data-splitting>並將<h2>更改為<h2 data-splitting> .

<script>
$('document').ready(function() {

    $('h1, h2, h3, h4').attr('data-splitting', '');

});
</script

或作為

<script>
jQuery.noConflict()(function($) {
    $('document').ready(function() {

        $('h1, h2, h3, h4').attr('data-splitting', '');

    });
});
</script>

現在腳本作為內聯 JS 存在於頭部，但它不會更改標題標簽。

Answer 1

對於來自主題（主要是 h1）的標簽，需要更改模板文件。

對於來自帖子內容的標簽，您可以使用“ the_content ”過濾器進行修改（使用正則表達式查找標題標簽列表並進行修改）。