如何在WordPress帖子中编写自定义代码

有许多原因导致您想要在WordPress帖子中编写或包含其他代码。您可能需要展示广告,对网站的某些部分应用独特的样式,或者简单地标记一些文本或内容以引起注意。尽管如此,您仍可以添加代码以实现各种视觉效果,以提供更好的用户体验.


所有这些以及其他因素都是有道理的,但是无论您要使用自定义代码实现什么目的,编写代码的过程都可能令人头疼或直截了当!在本教程中,我们将涵盖以下领域:

  • 添加看起来像代码但行为不像代码的代码(以防您想要展示代码行或改善网站外观)
  • 添加旨在表现类似代码的代码,例如脚本广告,例如Google Adsense广告

在这两个类别下,我们将深入研究诸如HTML,CSS,Javascript之类的编程代码,并接触广告和广告的美感。

容器。现在,不用大张旗鼓,让我们开始做生意并编写一些代码.

添加看起来像代码但不像代码的代码

如果您想展示用户可以复制和粘贴的代码(也许您是Web设计人员或开发人员),请务必正确进行,因为即使是单个换行符也可能使代码混乱,从而影响您的所有工作。 WordPress解释代码的方式取决于您使用HTML还是Visual Post编辑器。将代码直接输入到可视化编辑器中将不会产生您希望创建的效果,因为可视化编辑器将代码视为普通文本,这意味着Web浏览器不会将您的代码解释为“代码”,而是普通文本。.

另一方面,HTML Post编辑器将识别您使用的任何HTML或CSS标记,这意味着它们将由Web浏览器解释,这可能会导致布局混乱和内容看起来时髦。例如, 

在视觉编辑器中将被解释为普通文本,结果将是
. 然而,
 在HTML编辑器中将被解释为HTML标记,结果将是创建容器.

HTML练习

这实际上是徒劳的,但是您可以尝试一下,以更清楚地了解我的意思。打开你的 HTML编辑器, 类型

并保存为草稿。保存草稿后,点击“预览帖子”以查看您的 乱码的网站. 不用担心,它不是永久性的,您可以将草稿丢掉。现在恢复营业.

通常,您可以通过两种方式使用代码。首先,您可以在一行(或一段)内使用代码来阐明有关代码的观点。其次,您可以编写,突出显示代码并将其放在如下代码块中:



在WordPress帖子教程中编写代码


...

为了达到上述效果,我们使用如下代码标记 …我们的代码在这里 . 替代箭头(<  >)加上方括号([]),具体取决于您的WordPress网站和所使用的帖子编辑器(可视或HTML)。您希望显示的代码必须在开始标签之间,   和结束标签, . 例如,在段落中使用代码

一段代码

代码标记使非HTML文本看起来像代码,但是它不会告诉Web浏览器解释HTML标记或将其从帖子中删除。这意味着浏览器仍然可以对您的HTML标记进行编码,从而难以展示 HTML标签 在您的代码中。但是,您可以通过使用扩展字符或字符实体来表示 < > 字符,这会欺骗所有浏览器。例如…

HTML标签可以解释为HTML标记

…将创建一个新的容器(感谢

)和标题(

),这会使您的网页混乱。但是,如果您使用字符实体替换 < > 箭头,您将避免这种情况并根据需要输出代码。因此,以上代码如下所示:

改用角色实体

创建突出显示的代码块

如果我想突出显示一段代码(甚至是文本)来得到类似的东西,

代码块

我首先将代码(或文本)放入这样的容器中:

您必须在HTML编辑器中执行此操作

然后,我可以直接(如上图)或通过使用CSS添加样式 style.css 在主题主文件夹中找到的文件.

设置代码标签样式

代码标签将使用 并将文本默认设置为等宽字体。您可以更改所有内容,以使代码看起来像您想要的样子。您所要做的就是添加…

 代码{font-size:1.2em;颜色:#000; font-weight:normal;} 

…或类似您的东西 style.css. 样式无限,一切都取决于您的个人喜好,所以不要退缩–远离样式.

添加行为类似代码的代码

如果您想显示广告或其他脚本(例如,您帖子中的Javascript代码段。虽然有插件,例如 快速AdSense, 这将有助于您管理帖子中的广告,您可能会对安装完全控制的独立脚本感兴趣.

如果您的广告是简单的图片和链接,则可以通过上传实用程序将广告添加到帖子中。只需上传图片并输入链接(可能还有标题),就可以完成工作。这种方法是有局限性的,因为您只能将广告向左,向右或居中对齐-就像典型的图像一样。另外,您可以使用HTML编辑器在帖子中创建一个容器.

例:


在您要投放广告的确切位置创建此容器,这意味着您需要在添加广告之前准备好帖子。容器准备好后,您可以根据需要对其进行样式设置。您可以使用style.css来移动它 位置 属性。如果您想运行 Google Adsense广告 在您的帖子中,您仍然可以使用 快速AdSense –插件–或创建一个容器并按以下方式放置您的广告代码:


注1: Google广告基于Javascript,并且只要用户在其计算机上启用了Javascript,所有主要的网络浏览器都可以对其进行解释.

笔记2: 您必须为您的网站选择正确的广告尺寸,以免弄乱您的帖子和网站.

如果您想添加一个永久广告,而该广告可以在所有帖子(当前和将来的帖子)中显示,而无需任何额外的工作,则需要修改 单发模板 (single.php). 通过将以下代码添加到所有帖子的顶部,我在所有帖子的顶部放置了一个468px x 60px的广告 single.php 之后立马 < – – END post-entry-meta – ->.


当然,您必须使用自己的Google Ads��Google Adsense广告在我的博客上的显示方式如下:

用WordPress编写代码

寻找 single.php, 去你的 管理面板– >>外观– >>编辑器– >> single.php. 打开single.php后,使用搜索栏 (Ctrl + F) 定位 < – – END post-entry-meta – ->.

您可以按原样保留容器或使用style.css对其进行样式设置。并记得保存所有更改。的

容器确实非常有用,当您将其与CSS和一点点创意结合使用时,您可以在WordPress网站上实现很多目标。它可以帮助您在网站上的任何地方放置任何代码(或任何实际内容).

工具箱

如果您想了解有关在WordPress帖子中编写自定义代码的更多信息,请随时查看以下资源:

好吧,就是这样。我们设法涵盖了我们一开始就概述的领域。但是,如果您不了解本文中的任何概念,或者想添加您的建议或观点,请在下面的评论部分中分享您的想法!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map