17713433920 info@mac163.com
wordpress动态
如何在WordPress帖子中编写自定义代码
如何在WordPress帖子中编写自定义代码

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

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

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

在这两个类别下，我们将深入研究诸如HTML，CSS，Javascript之类的编程代码，并接触广告和<div>容器的优点。现在，不用再大张扬，让我们开始做生意，编写一些代码。

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

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

另一方面，HTML Post编辑器将识别您使用的任何HTML或CSS标记，这意味着它们将由Web浏览器解释，这可能会导致布局混乱和外观时髦。例如，可视编辑器中的<div>将被解释为普通文本，结果将仅为<div>。但是，HTML编辑器中的<div>将被解释为HTML标记，结果将是创建容器。

HTML练习

这实际上是徒劳的，但您可以尝试一下，以更清楚地了解我的意思。只需打开HTML编辑器，键入<div>并将其另存为草稿。保存草稿后，单击“预览帖子”以查看损坏的网站。不用担心，它不是永久性的，您可以将草稿丢掉。现在恢复营业。

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

<html>
<head>
<title>Writing Code in WordPress Posts Tutorial</title>
<link rel="stylesheet" type="text/css" href="somefile.css"/>
</head>
<body>...</body>
</html>

为了达到上述效果，我们使用类似于<code>编写的代码标签…我们的代码在</ code>中。用方括号（[]）替换箭头（<>），具体取决于您的WordPress网站和所使用的帖子编辑器（可视或HTML）。您希望显示的代码必须位于开始标记<code>和结束标记</ code>之间。例如，在段落中使用代码:

code-in-paragraph

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

div-code-block-wpexplorer

…将创建一个新容器（感谢<div>）和标题（<h1>），这将使您的网页混乱。但是，如果使用字符实体替换<>箭头，则将避免此行为，并根据需要输出代码。因此，以上代码如下所示：

character-entities-wpexplorer

创建突出显示的代码块

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

code-block

我首先将代码（或文本）放入这样的容器中：

block-of-code

然后，我可以直接使用CSS（如上图所示）或通过 主题主文件夹中的style.css文件添加样式  。

设置代码标签样式

默认情况下，代码标记将使用<body>中的字体大小，并将文本放置为等宽字体。您可以更改所有内容，以使代码看起来像您想要的样子。您所要做的就是添加…

code{font-size:1.2em; color:#000; font-weight:normal;}

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

添加行为类似代码的代码

如果您想在帖子中显示广告或其他脚本（例如Javascript代码段），则此部分特别有用。尽管有诸如Quick Adsense之类的插件可以帮助您管理帖子中的广告，但您可能会对安装可以完全控制的独立脚本感兴趣。

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

例：

<div id =“ ad1”> 
<a href="ad_link"> <img src =“ image_location” height =“ yy” width =“ xx” alt =“ Ad_title” /> 
</a> 
</ div>

在您要投放广告的确切位置创建此容器，这意味着您需要在添加广告之前准备好帖子。容器准备好后，您可以根据需要对其进行样式设置。您可以使用position.css通过使用position属性来移动它。如果您希望在帖子中投放Google Adsense广告，则仍然可以使用Quick Adsense（即插件）或创建容器并按以下方式放置广告代码：

<div id="ad1">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

注意1： Google广告基于Javascript，并且只要用户在其计算机上启用了Javascript，所有主要的网络浏览器都可以解释Google广告。

注意2：您必须为网站选择正确的广告尺寸，以免弄乱您的帖子和网站。

如果您希望添加一个永久广告而无需任何额外工作即可显示在所有帖子（当前和将来的帖子）中，则需要编辑“ 单个帖子”模板 （single.php）。我在所有帖子的顶部放置了一个468px x 60px的广告，方法是在 <– – END post-entry-meta –->之后立即将以下代码添加到single.php中。

<div id="ad1">

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1289628145978703";
/* vistamediainc1 */
google_ad_slot = "7102844977";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</div>

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

writing-code-in-wordpress-wpexplorer

要找到single.php，请转到管理面板– >>外观– >>编辑器– >> single.php。 打开single.php后，使用搜索栏（Ctrl + F）定位  <– – END post-entry-meta –->。

您可以保留容器，也可以根据需要使用style.css对其进行样式设置。并记得保存所有更改。<div>容器确实非常有用，当您将其与CSS结合在一起并具有一定的创造力时，您可以在WordPress网站上实现很多目标。它可以帮助您在网站上的任何位置放置任何代码（或任何实际内容）。

工具箱

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

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

微信二维码

微信扫描二维码联系我们！
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答：WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等！

需要提供WordPress主题/插件的汉化服务可以随时联系我们！另外成品WordPress网站以及半成品WordPress网站建设，海外Google SEO优化托管服务，百度SEO优化托管服务，Centos/Debian服务器WP专用环境搭建，WP缓存服务器搭建，我们都是你的首选，拥有多年WP开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！

随机推荐

回到顶部