我正在为投资组合网站创建自定义主题 . 这是我在wordpress中的第一个自定义主题 . 到目前为止,我已经设法解决了我的大部分问题,但是这个(尽管我发现不太可能没有人需要这个)我无法找到 .
问题:我需要自定义可视化编辑器输出的HTML标记和CSS类 . 为了更好地解释我会发布图片和代码:
这是可视化编辑器中的内容:
这是默认的wordpress HTML输出:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
ornare
lectus nec sapien venenatis iaculis. Praesent consequat at neque
a
placerat. Nunc vel lacus lectus. Aliquam non tempus mauris.
<img class="alignnone size-full wp-image-14"
src="http://192.168.25.187/wordpress/wp-
content/uploads/2017/07/Magazine-1.jpg" alt="" width="474"
height="315" />
这是我想要的标记:
<h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
ornare
lectus nec sapien venenatis iaculis. Praesent consequat at neque
a
placerat. Nunc vel lacus lectus. Aliquam non tempus mauris.</h5>
<div class="row">
<div class="col-sm-8">
<a class="fancybox" rel="galeria1"
ref="http://192.168.25.187/wordpress/wp-
content/uploads/2017/07/Magazine-1.jpg" title="teste">
<img class="img-responsive"
src="http://192.168.25.187/wordpress/wp-
content/uploads/2017/07/Magazine-1.jpg" alt="" width="474"
height="315" /></a>
</div>
</div>
我需要编辑哪些文件(或编写函数)来修改默认的可视编辑器HTML和CSS输出?
4 回答
Update 2:
您可以尝试使用短代码 . 你会在functions.php中添加这样的东西 .
然后在这样的帖子中使用这些短代码:
我也会将锚标记放在帖子中,以便在短代码中只使用带有类的
<div>
. 这样,短代码可以重复用于其他帖子 . 希望上面的代码可以指导您找到解决方案 .使用PHP本机
DOMDocument
功能使其工作 . 以下是它的工作原理:首先,我们需要打印
the_content()
的文本内容 . 由于我不想要图像,我们将剥离所有标签:这显然有一个缺点,它剥离了所有标签,包括
<strong>
和<a>
. 当我找到时,会回来解决这个问题 .现在,要在我想要的代码中显示图像,我们需要解析
the_content()
并使用DOMDocument
查找所有<img>
标记:最后一行
$img->getAttribute('src');
将所有图像url存储到$ img数组中 . 最后,我们只需要在帖子中为每个图像打印一个循环内的数组内容:请注意,使用
getAttribute();
我可以从解析的标记中检索我需要的每个属性,包括用户在后端提供的 Headers ,替代文本和宽度/高度 .希望能帮助到你 .
按照文件夹的文件路径,永久链接会指出并直接编辑它 . 这是一个测试文件是否正确?
您可能希望使用chrome的右键单击检查轻松找到img .
我建议使用占位符创建某种HTML模板,这样您只需输入占位符(文本和图像URL),您的模板将处理其余部分 .
您可以使用像Snippy这样的免费插件来执行此操作 . 完全披露,我是该插件的作者 .
Snippy让您可以创建自己的短代码并为其选择名称 . 然后,您可以在短代码中添加HTML,CSS和JavaScript(在Snippy中,这些名称为“位”) . 然后将短代码放在页面或帖子上,Snippy将输出您的HTML .
因此,根据您的情况,您可以根据HTML代码段创建一个HTML位,并为其添加
{{text}}
和{{image}}
占位符:然后,您可以将此HTML位添加到自定义短代码中,并在文本编辑器中使用短代码 . 现在,您可以在网站上重复使用上述HTML代码段,而无需在任何地方复制它 .