如何把网页插入wordpress页面

在制作wordpress主题猴子wordpress插件过程中，经常需要添加样式文件或者js脚本文件，由于大多数用户运行网站上多个插件，可能会加载

各式各样的文件，容易引起冲突，所以wordpress系统为开发者提供了一个很好的脚本及样式文件的排队系统，这有助于防止插件之间的脚本冲突问题。这

篇文章中，主要介绍wordpress中添加Javascript文件与css文件的方法，对那些刚开始学习WordPress主题和插件的开发是特别有

用的。

错误方式

wordpress中提供了wp_head钩子来帮助在页面的头部添加指定的头部消息，比如常见的关键词与描述，很多人也同样会使用这种方式来添加站点的外部样式文件与脚本文件，添加代码如下：

<?php

add_action('wp_head','wpb_bad_script');

function wpb_bad_script(){

echo'<script type="text/javascript" src=""></script>

';//添加js文件

}

?>

这种方式虽然使用简单，但是非常不推荐使用，这种加载方式容易造成wordpress脚本的冲突。

wordpress脚本排队系统

1、介绍

wordpress在全球拥有强大的开发社群，很多人都非常积*的参与到wordpress的主题与插件的开发当中，并且可以免费使用，为了防止各个开

发者开发的插件在使用过程总出现脚本冲突的问题，wordpress提供了一个非常强大的脚本加载函数wp_enqueue_script，通过这个函

数，可以告诉wordpress在哪加载脚本，脚本依赖哪些框架，而且该函数在利用内置的Javascript库时，可以避免多次加载同一个脚本。这有助

于减少页面加载时间，以及避免与其他主题和插件冲突。

2、使用实例

wordpress正确加载脚本的使用很简单，代码如下：

<?php

function wpb_adding_scripts(){

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');

}

add_action('wp_enqueue_scripts','wpb_adding_scripts');

?>

可以将以上代码放入你的插件文件中或者你主题的functions.php文件。

说明：

实例中首先通过函数wp_register_script(),这个函数接收5个参数：

$handle

(string)(必须)脚本名称.名称必须**在之后函数 wp_enqueue_script()会使用到该名称.

Default: None

$src

(string)(必须)脚本路径，可以使用**路径。

Default: None

$deps

(array)(可选)脚本依赖包，依赖包会在脚本加载之前预先加载。

Default: array()

$ver

(string)(可选)脚本版本控制。

Default: false

$in_footer

(boolean)(可选)定义脚本的位置，如果为true脚本会在页面底部加载，默认在head头部加载。

Default: false

当使用wp_register_script()函数注册脚本文件后，就可以使用函数wp_enqueue_script()函数来加载该注册的脚本文件。

也许有人会问为什么不直接加载脚本文件，而是先注册后加载，这不是多此一举吗。其实这主要是为了站点其他开发者在其他插件或者主题总方便引用核心脚本文件。

wordpress如何加载CSS样式文件

wordpress css样式文件的加载与以上介绍的脚本文件加载方式是一样的，如下实例：

<?php

function wpb_adding_styles(){

wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));

wp_enqueue_script('my_stylesheet');

}

add_action('wp_enqueue_scripts','wpb_adding_styles');

?>

以上实例用了wp_register_script钩子来加载样式文件。

实例中使用了plugins_url()来获取样式文件的路径，这个一般在插件开发过程中使用的居多，如果主题中开发使用到

wp_register_script()函数则可以使用get_template_directory_uri()来获取样式文件路径，如果是子主题中

使用，则可以使用函数get_stylesheet_directory_uri()来获取路径，实例如下：

<?php

function wpb_adding_scripts(){

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');

}

add_action('wp_enqueue_scripts','wpb_adding_scripts');

?>

要注册网站域名，购买或者租用到网站的空间。上传内容，上传图文和视频等内容就可以创建自己的网站了。

现在市场上很多各式各样的网站搭建工具，网站制作平台，任意找一个自己用起来易上手的工具即可。网站搭建工具中一般都有模板提供，可以按照行业、风格、类型来选择自己中意的模板。选好后就可以套用，网站随即成功创建。

要准备以下的资料

1.注册域名。*好能和社团有点关联

2.选择网站系统。例如wordpress，zblog，emblog等都可以。

3.选择云服务器，例如阿里或者腾讯等

4.解析域名到服务器

5.发布*客系统到云主机

以上步骤还是需要一些知识的。

以下是在linux服务器中搭建网站的过程了，安全*高，系统资源也很充足。

步骤方法

一、先去域名注册商那里注册一个自己喜欢的域名，常用的域名注册商有：万网、新网、西部数码等；

二、需要选购租用一台服务器，考虑到是个人*客可以先选择使用虚拟主机；如果使用国内服务器或者虚拟主机的话，需要对域名进行备案，备案流程比较简单，可以联系服务器商代备即可。

三、网站程序，这里是一个网站的核心。个人*客网站建议选用网站*客程序，常用的有WordPress、zblog等。

四、对自己选好的网站程序本地搭建成网站，然后进行修改调整，使其成为自己专属的*客网站，本地搭建可以网上搜一下本地环境安装包来配置本地环境；再按照所用程序**教程进行安装使用。

五、网站调整好以后，需要通过FTP等工具把网站程序上传到服务器；然后在服务器绑定自己注册的域名；再去域名服务商那里对域名解析，解析到自己服务器上。

六、等待域名解析生效后，在浏览器地址栏输入域名就可以访问自己的*客了，至此，网站建设完成。老魏为此写过云服务器手动建站等多篇教程，看完有疑问可以问，看到了就回答。

无论你是为WordPress写插件或hack，还是添加有关WordPress的代码片段或其他如HTML，CSS，PHP或javascript的编程代码，如何让插入于日志中的代码有其形而不发生作用对写*客的用户来说是常常遇到的拦路虎。

默认情况下，WordPress会将<和>自动转换为<和>，在发表后看起来就是<和>。如果它发现日志中使用了HTML标签，就会将其当作HTML标签来使用，结果你的文本看起来就很怪异，布局也会弄得一团糟。

网页中代码的使用有两个方面。在段落中使用代码表示正在讨论该段代码，然后是被高亮显示的代码。

段落中的代码

有两种HTML标签可以将文本转为等宽样式，即< code>和< tt>。而后者现今已基本不使用了，取代它的是用处更大且更富语法意义的< code>，它能将计算机代码类的文本与一般语言分辨开来。

此为用于某段落内的代码示例

用以描述WordPress中的< code>index.php</code>,

< code>sidebar.php</code>及< code>header.php</code>

模板文件。如果你希望在文字周围使用标签以使它们看起来如代码一般，此方法就很有用，但如果你想展示如HTML的标签的话该如何是好呢？

在< code>header.php</code>模板文件中，查找< code>< div class="header"></code>部分以修改< code>< h1></code>标题栏。使用< code>标签是无法告知WordPress将HTML参考从日志中分离开的。它会看到< code>标签，然后看到div，因此它就会在网页中新建一个容器作为应答。WordPress会认为你实际上是在使用HTML标签，不小心使用h1这样的标签就能搞砸整个网页布局和设计初衷。

若要让WordPress将此识别为段落中的代码的话，可以使用字符实体或扩展字符来表示其前后的左右箭头。

在< code>header.php</code>模板文件中，

查找< code><div class="header"></code>

部分以修改<h1>标题栏。

默认情况下，WordPress会将任何以****:开头的文本转换为链接。如果你要为WordPress网站内特定文章做链接，而不使用并将其转为链接的话，你可以使用扩展字符来代替右斜杠，这样一来WordPress就不会“看到”该链接了。

...在日志中使用

使用链接到某特定的WordPress日志....

以下列出一些*常用的HTML字符实体：

<=<

>=>

/=/

]= ]

[= [

"="

'='

后文给出了相关资源，它将帮助你将HTML标签转为字符实体，因此你就无需劳神背下这些字符代码了。

使用PRE标签

要使得代码可以被复制粘贴到其他代码或模板文件中的话，可以使用< pre>这个HTML标签。

< pre>标签指示浏览器使用等宽的代码字体，并完完全全地将< pre>标签内的内容复制下来。每个空格，分行，以及代码都被完整地复制一遍。

< h3>Section Three Title</h3>

< p>This is the start of a

<a title="article on relationships" href="goodtalk.php">

good relationship</a> between you and I....

使用< pre>标签看起来并不美观，但却能达到目的。后文将给出解决外观问题的例子。它会将代码原原本本地展示出来。

我们这里说原原本本，事实也是如此。如果你的代码行非常长，它就会伸到页面外面去，因为并无任何指示告知它进行换行。以下给出一个例子：

< h3>Section Three Title</h3>

< p>This is the start of a<a title="article on relationships" href="goodtalk.php">good relationship</a>

between you and I and I think you should read it because it is important that

we have these little<a title="article on communication" href="communication.php">conversations</a>

once in a while to let each other know how we feel....

看起来很不舒服吧。要避免这种代码窜出屏幕的现象，就要进行分段。但在哪进行分段并放入段行标签可没那么容易决定下来的。

如果你*悉编程语言的话，就知道在何处断行而不会弄砸一行代码。但如果你不知道在何处断行的话，就进行实验吧。将代码写入后，进行断行并进行测试。如果代码能够起效的话，就是要这种断行形式。否则的话就请尝试其他的断行位置。

如果你的代码行很长，可以考虑只显示一小部分代码，然后在网站上的文本或PHP文件中给出完整代码段的链接，也可以使用用于临时展示代码的在线pastebin。

代码的疑难排解

在WordPress日志中写代码可谓一项挑战，它会覆盖WordPress的默认风格。如果你在日志中写代码时遇上麻烦的话，下面这些内容可能会对你有帮助。

代码中的引号

在日志中写进代码时常遇到的问题是，WordPress会将代码中的直引号转换为文字处理程序中出现的弯引号。用于实现功能的代码不应当具有这种弯引号，而应该保持原有的直引号。

你可以使用< pre>标签来避免出现这种情况，或使用字符代码来表示引号也可以解决此问题：

< p class="red">

即可写为<p class="red">但如果你是在首次发布某页面之后进行编辑的话，html代码编辑器就会用自带的符号替换所有的实体。因此，如果你使用"来表示引号的话，它们会变为"，而当你保存的时候它们就会被转换掉。

定制代码标签的风格

默认情况下，使用< pre>和< code>会将文本显示为等宽样式的字体，并使用body标签的字号。如果你想使用不同的字号，然后让这些标签呈现出不同的颜色或风格。

在WordPress外观主题文件夹的style.css风格页中，为这两类标签添加风格。举例如下：

pre{border: solid 1px blue;

font-size: 1.3 em;

color: blue;

margin: 10px;

padding:10px;

background:#FFFFB3}

code{font-size:1.2em;

color:#008099}

使用< code>将会是上面的样子，而使用pre则会是如下形式：

pre{border: solid 1px blue;

font-size: 1.3 em;

color: blue;

margin: 10px;

padding:10px;

background:#FFFFB3}

code{font-size:1.2em;

color:#008099}