wordpress如何用js显示内容

在制作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');

?>

提高网站加载速度是SEO优化的关键要素，快的加载速度往往能**增加页面访问量，尤其是对于大型网站，*能优化带来的效益*为可观。

在网站*能优化的策略中，减少不必要的功能和代码只是其中一部分，实施图片和视频的懒加载策略同样能**提升页面加载速度。

虽然WordPress有许多插件可以实现懒加载功能，但有时候使用插件反而可能增加页面加载时间。因此，我们也可以通过编写JavaScript代码来实现懒加载。

懒加载的核心思想是使用JavaScript对页面中的图片进行处理，当图片不在可视区域内时，不进行加载，只有当图片进入可视区域时，才通过JavaScript加载图片。如此一来，不在窗口中的图片就不会占用页面加载时间，从而提升页面加载速度。

具体实现懒加载，我们需要对HTML中的img标签进行一些调整。一个普通的img标签，src属*指向图片地址。而懒加载的实现，是在图片未进入可视范围前不加载图片，或预先加载一个小的占位图片。这要求我们使用一张1*1像素的图片placehold.png，并为图片设置width和height属*。

为了在图片进入窗口时加载正确的图片，我们需要在img标签中使用data-src属*存储原始图片的链接，并在页面上添加一个特定的类名，以让JavaScript能够找到并替换它。

为了实现全站范围的懒加载，我们可以在WordPress主题的functions.php文件中添加以下代码：

php

add_filter('wp_get_attachment_image_src','lazy_load_image', 10, 3);

function lazy_load_image($src,$attr,$id){

$img_class='lazyload';

if(isset($attr['class'])&& is_array($attr['class'])){

$attr['class']= array_merge($attr['class'], array($img_class));

} else{

$attr['class']=$img_class;

}

$src= wp_get_attachment_image_src($id,'full');

return array('url'=>$src[0],'attr'=>$attr);

}

这段代码会为所有图片添加一个名为.lazyload的类，并在页面加载时替换src属*为data-src属*，实现懒加载功能。通过这种方式，我们可以有效提升WordPress网站的加载速度，实现更好的用户体验。

一般都是直接在主题的header.php文件中直接引用，部分主题也会在主题的functions.php文件中通过WP自带的函数wp_enqueue_scripts来加载JS文件。

1、在主题header.php文件中直接引入文件，如

<scripttype='text/javascript'src=';

或者

<scriptsrc="<?phpechoget_template_directory_uri();?>/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

2、在主题的functions.php文件中引入文件，如

functionmy_enqueue_scripts(){

if(!is_admin){//前台加载的脚本与样式表

//去除已注册的jquery脚本

wp_deregister_script('jquery');

//注册jquery脚本

wp_register_script('jquery',get_template_directory_uri().'/js/jquery/1.10.2/jquery-1.10.2.min.js',false,'1.0',false);

//提交加载jquery脚本

wp_enqueue_script('jquery');

}

}

//添加回调函数到init动作上

add_action('init','my_enqueue_scripts');

/p>