WordPress如何使用HTML，從基礎(chǔ)到高級(jí)技巧

來自：素雅營銷研究院

方知筆記

2025年06月25日 17:49

一、WordPress中HTML的基本使用

WordPress作為全球最流行的內(nèi)容管理系統(tǒng)，雖然提供了可視化編輯器，但了解HTML的使用能讓你更靈活地控制網(wǎng)站內(nèi)容和樣式。

1.1 在文章/頁面中插入HTML

在WordPress編輯器中，有兩種方式可以添加HTML代碼：

文本編輯器模式：在經(jīng)典編輯器中，點(diǎn)擊”文本”標(biāo)簽切換到HTML編輯模式；在古騰堡塊編輯器中，選擇”自定義HTML”塊。
短代碼：可以使用[html]短代碼包裹HTML內(nèi)容，但需要確保短代碼功能已啟用。

1.2 常用HTML標(biāo)簽示例

<h2>這是一個(gè)二級(jí)標(biāo)題</h2>
<p>這是一個(gè)段落，可以包含<strong>加粗文本</strong>和<em>斜體文本</em>。</p>
<a href="https://example.com">這是一個(gè)鏈接</a>
<img src="image.jpg" alt="圖片描述">
<ul>
<li>無序列表項(xiàng)1</li>
<li>無序列表項(xiàng)2</li>
</ul>

二、通過主題文件編輯HTML

對(duì)于更高級(jí)的定制，你可能需要直接修改主題文件：

2.1 訪問主題文件

進(jìn)入WordPress后臺(tái) > 外觀 > 主題編輯器
或者通過FTP/SFTP訪問服務(wù)器上的wp-content/themes/your-theme/目錄

2.2 關(guān)鍵主題文件

header.php - 網(wǎng)站頭部HTML
footer.php - 網(wǎng)站底部HTML
index.php - 主頁模板
single.php - 單篇文章模板
page.php - 單頁模板
functions.php - 功能函數(shù)文件

重要提示：修改主題文件前，建議創(chuàng)建子主題或備份原文件。

三、HTML與WordPress函數(shù)的結(jié)合

WordPress提供了大量PHP函數(shù)，可以與HTML結(jié)合使用：

<div class="featured-post">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>

四、安全注意事項(xiàng)

過濾用戶輸入：使用wp_kses()函數(shù)過濾用戶提交的HTML
避免直接執(zhí)行JS：WordPress會(huì)自動(dòng)過濾script標(biāo)簽
使用非ces：對(duì)于表單等敏感區(qū)域，使用WordPress的非ce機(jī)制

五、高級(jí)技巧

5.1 自定義HTML小工具

在WordPress后臺(tái) > 外觀 > 小工具中，可以使用”自定義HTML”小工具向側(cè)邊欄或頁腳添加HTML內(nèi)容。

5.2 使用HTML5結(jié)構(gòu)

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>

5.3 響應(yīng)式HTML設(shè)計(jì)

結(jié)合CSS媒體查詢，確保你的HTML在不同設(shè)備上表現(xiàn)良好：

<div class="responsive-container">
<img src="image.jpg" alt="" class="responsive-image">
</div>

<style>
.responsive-image {
max-width: 100%;
height: auto;
}
</style>