所有分类
  • 所有分类
  • 插件
  • 教程
  • 模板
  • 源码
  • 软件
  • 项目
  • AI

WordPress 经典编辑器 代码速查表(可直接复制即用)

一、基础文本标签

<h2>二级标题</h2>
<h3>三级标题</h3>
<p>普通段落文字</p>
<strong>加粗</strong>
<em>斜体</em>
<mark>高亮文字</mark>
<del>删除线</del>
<u>下划线</u>
<br> 换行
<hr> 分割线

二、链接 & 图片

<!-- 新窗口链接 -->
<a href="https://xxx.com" target="_blank" rel="noopener noreferrer">点击访问</a>

<!-- 图片 -->
<img src="图片地址" alt="图片描述" width="700">

<!-- 图片带链接 -->
<a href="跳转地址"><img src="图片地址" alt="描述"></a>

三、列表

<!-- 无序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>

<!-- 有序列表 -->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

四、引用 & 行内代码

<blockquote>引用文案内容</blockquote>
<code>行内代码文字</code>
<pre>
多行代码
保留换行和空格
</pre>

五、常用提示框(直接粘贴)

蓝色提示框

<div style="background:#e7f5ff;border-left:4px solid #0073aa;padding:12px 15px;margin:15px 0;">
💡 温馨提示:这里写提示内容
</div>

绿色成功框

<div style="background:#f0f7e6;border-left:4px solid #28a745;padding:12px 15px;margin:15px 0;">
✅ 成功说明:这里写内容
</div>

黄色警告框

<div style="background:#fff8e6;border-left:4px solid #ffc107;padding:12px 15px;margin:15px 0;">
⚠️ 注意警告:这里写内容
</div>

红色危险框

<div style="background:#feefef;border-left:4px solid #dc3545;padding:12px 15px;margin:15px 0;">
❌ 重要提醒:这里写内容
</div>

六、按钮样式

<a href="链接地址" style="display:inline-block;background:#0073aa;color:#fff;padding:8px 20px;border-radius:4px;text-decoration:none;">立即查看</a>

七、点击展开 / 收起

<details>
<summary>点击查看详情</summary>
<p>这里是隐藏的内容,点开才能看到</p>
</details>

八、简单表格

<table border="1" cellpadding="6" cellspacing="0" style="width:100%;border-collapse:collapse;">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
</table>

九、WP 自带短代码

# 文章分页
<!--nextpage-->

# 图片相册
[gallery ids="1,2,3" columns="3"]

# 视频播放
[video src="视频MP4地址"]

# 音频播放
[audio src="音频MP3地址"]

十、两栏均分布局

<div style="display:flex;gap:20px;margin:20px 0;flex-wrap:wrap;">
<div style="flex:1;min-width:280px;padding:15px;background:#f8f9fa;border-radius:4px;">
左栏内容
</div>
<div style="flex:1;min-width:280px;padding:15px;background:#f8f9fa;border-radius:4px;">
右栏内容
</div>
</div>
阅读全文
版权与免责声明

1. 本文(含图片)为本站原创整理及方案优化,仅供学习交流使用
2. 本站仅提供信息存储展示服务,内容观点不代表本站立场
3. 如侵犯您的权益,请联系站长删除,邮箱:9820910@qq.com
用心创作,感谢支持 ❤️原文链接:https://xdyl.club/3712.html,转载须注明来源与原文链接~~~
没有账号?注册  忘记密码?

社交账号快速登录