银川网站建设设计:WordPress插件从无到有开发

银川网站建设设计

我假设你是一个自由职业者,或者是一个全职的网页设计公司的设计师。大多数网页设计师都是使用静态网站设计。

现在的问题是:作为一个静态网站设计师,你有未来吗?

答案可能是否定的,因为大多数客户和公司都计划将他们的网站转换成一个CMS,比如WordPress、Joomla或Drupal。

WordPress正在成为新的静态网站。

WordPress集成非常简单,几乎任何人都可以使用自动安装程序来设置WordPress站点。除非你熟悉使用像WordPress这样的CMS,否则作为一个自由职业者,你肯定会面临更多的问题。并且你会认真加快你的网站开发过程,阅读本文中的具体内容。

目录:

  1. 面向设计师的WordPress插件开发课程-期待什么
  2. 理解WordPress插件结构
  3. 创建WordPress插件模板的基础
  4. 将您最喜欢的滑雪板集成到WordPress中
  5. 添加功能增强WordPress插件

下载源文件。

从这门课可以期待什么?

作为一名设计师,你的重点应该是学习WordPress主题的设计和开发。但客户永远不会满意,即使你建立他们的网站的专业主题和设计。他们会要求你提供更多的功能,因为他们知道用WordPress构建东西更容易。

WordPress插件是一种快速而简单的解决方案,可以将您的站点包装为其他功能,如社会整合、面包屑、谷歌地图等。如果您不熟悉使用和自定义插件,您将需要开发人员的支持,以防止客户离开您,并寻找另一个能够同时提供设计和开发任务的开发人员。

雇用开发人员并创建自定义功能对自由职业设计师来说成本很高。所以你应该考虑学习插件开发的技巧。

你对我们有什么期望?

本教程系列的最初部分将由四个部分组成,我们将从零开始学习WP插件开发。在整个系列中,我们将开发一个WordPress插件来集成您最喜欢的jQuerySlider。最后的输出将是一个完整的滑块插件的WordPress,您使用的任何部分的CMS。

理解WordPress插件结构

WordPress插件允许我们在不影响核心系统的情况下创建额外的功能。作为设计师,我们的主要重点应该是开发高质量的前端插件和令人敬畏的设计,而不是开发高技术的后端插件来提供复杂的功能。

因此,了解插件的基本结构、初始组件和功能是非常重要的。

先决条件是什么?

在本系列文章中,您必须使用PHP、JavaScript和MySQL等技术。拥有这些技术的基本知识是理想的,尽管这不是强制性的。作为设计人员,我不期望您了解使用服务器端技术和数据库的知识。但是JavaScript的基本知识会很方便,我想您已经有了基本的想法。

你应该从头开始创建插件吗?

我认为答案应该是否定的,在这样的情况下,你可以找到一个免费的插件来实现所需的功能。WordPress插件库充满了具有广泛功能的插件。从存储库中找到插件要比从头开始创建要容易得多。

即使存储库包含大约20,000个插件,也不能保证您的项目中会有适合每个需求的插件。在这种情况下,您必须要么修改现有插件,要么从头开始编写自己的插件。

WordPress插件组件

我们将专注于在整个系列中创建与网页设计相关的插件。因此,这些插件将使用HTML、CSS和JavaScript的组合,向浏览器提供某种类型的输出。这将被视为插件的前端组件。

通常我们需要用动态数据来改变设计组件。因此,我们必须在WordPress管理面板中创建一个自定义部分,以输入动态数据和选项。此数据创建部分可视为插件的后端组件.

让我们来看看ThemeForest的高端滑块插件的后端和前端。

插件前端

wpbs_05

插件的后端

WordPress插件从头开发,第4/4部分:设置页

您可以看到这些组件是如何在专业插件中有效地使用的。最简单的插件不需要后端组件。在这里,我们将创建一个具有前端和后端组件的滑块。

创建第一个插件

首先,我们必须知道在WordPress安装中创建插件的位置。WordPress由三个主要文件夹组成,称为wp-content、wp-admin和wp-include.

下面的屏幕截图预览WordPress安装中可用的文件和文件夹。我们的重点将放在突出显示的wp内容文件夹上,在那里我们安装我们的主题和插件。

1 wd-WordPress-插件-开发过程

在wp内容中,您将找到另一个名为plugins的文件夹。现在切换到插件文件夹,您将看到很少默认插件文件夹创建的WordPress安装。这将是我们创建自己插件的地方。

下面的屏幕显示wp内容文件夹中可用的文件夹列表。

wpbs_03

通过包含插件文件,我们可以直接在插件文件夹中创建一个插件。但推荐的方法是在plugins文件夹内的一个单独文件夹中创建每个插件。

因此,让我们将插件命名为1WD滑块,并创建一个名为1wd-滑块的文件夹。重要的是要知道插件文件夹的命名是没有限制的。为了保持一致性,我更喜欢使用插件名作为文件夹名。下图显示插件中的插件文件夹。

WordPress插件从头开发,第4/4部分:设置页

创建插件文件

插件可以包含任意数量的文件。为了本教程的目的,我将插件创建为一个PHP文件。因此,在插件文件夹中创建一个名为1wd_slder.php的文件。

再一次,在命名插件文件没有限制。创建了插件文件夹和文件后,让我们看看它是如何显示在WordPress插件列表上的。

以管理员身份登录到WordPress帐户,然后单击左侧的Plugins选项卡,获得可用插件的列表。

wpdd_part3_7

令人惊讶的是,插件列表没有显示我们的插件。原因是什么?

即使我们同时创建了插件文件夹和文件,我们也没有通知WordPress将其视为插件。我们必须在文件顶部添加一个预先定义格式的PHP注释,使其成为WordPress插件。打开1wd_slder.php文件并插入以下PHP注释。

作为一个设计人员,您可能不熟悉PHP代码,因此我将详细解释这些代码。标记<?php和?>分别用于打开和关闭PHP代码。这与JavaScript中的脚本标记类似。您放置在这些标记之间的任何内容都将作为PHP代码执行。

然后我们有一个多行注释,它类似于JavaScript中的注释语法。我们可以将/*/用于多行注释和/用于单行注释。

在注释中,我们定义了关键值结构中的插件细节。基本上插件名称将是最重要和强制性的参数。一旦您设置插件名称,WordPress将标识您的文件作为插件显示在插件列表中。下面的屏幕包含我们的插件与完整的细节。

wpbs_06

现在,让我们通过与屏幕的比较来查看参数的其余部分。

  • pluginURI-用于让用户知道插件的细节和可用的下载选项。这不是强制性的,如果您不打算公开该插件,则可以将其保留为空白。
  • 描述-用于提供插件功能的摘要。
  • Version-用于定义版本,您可以任意使用任何编号格式。插件需要升级与每个WordPress版本升级。因此,有适当的版本编号是很好的,即使它不是强制性的。
  • 作者和作者URI-用于提供有关插件开发人员的详细信息。
  • 许可证-用于定义使用此插件的条件。我们可以包括标准许可证,如GPL 2,或只是提到一些我们喜欢的东西,如免费使用。

我们不需要考虑插件名称以外的其他参数,以防插件不能公开使用。

现在我们有了我们的第一个WordPress插件,尽管它目前什么也不做。我们可以从插件列表中激活或禁用插件。

让我们讨论更多关于插件激活的内容。

WordPress插件激活与失活

默认情况下,插件将处于非活动状态。我们可以点击插件名称下的激活链接来激活插件。一旦插件被成功激活,它的功能将被影响到您的网站。

此外,您应该能够看到停用链接,而不是激活后,成功激活链接。单击停用链接会将插件的状态恢复到原来的非活动状态。

WordPress插件从头开发,第4/4部分:设置页

我们能对激活/失活做些什么?

想一想现实世界的场景,你可以激活俱乐部或图书馆的高级会员资格。显然,您将获得额外的好处激活,你将失去这些好处在停用。类似地,我们可以执行一些插件激活和停用的任务。

WordPress提供了一个名为钩子的概念,在这个概念中,您可以触发某些任务来添加新行为或修改现有行为。因此,让我们看看激活和失活挂钩的代码。

function fwds_slider_activation() {
}
register_activation_hook(__FILE__, 'fwds_slider_activation');
function fwds_slider_deactivation() {
}
register_deactivation_hook(__FILE__, 'fwds_slider_deactivation');

上面的代码包含两个函数,称为fwds_sllider_activation和fwds_sllider_deactivation。PHP函数是一段可重用的代码,可以多次执行。即使作为一个设计人员,您也可能对函数有一个基本的认识,因为PHP函数与JavaScript函数类似。

然后,我们有两个钩子称为寄存器_激活_钩子和寄存器_失活_钩子。不要太担心钩子,因为在本系列中学习插件开发时,您将了解它们。

目前,只需使用插件特定的激活和失活函数定义这些钩子,并在函数中执行必要的代码。

为什么我们使用激活/失活钩

我们可以创建基本插件而不考虑激活和失活功能。但是高级插件需要这些功能来提供额外的功能。

下面列出了在插件激活/失活中我们可以做的事情。

  • 在激活时创建自定义数据库表以存储数据,并在停用时删除表。
  • 创建插件和激活的自定义选项,并在停用中重置。
  • 在激活时验证其他相关插件。
  • 在激活过程中需要执行的任何其他必要任务。

现在我们已经讨论了WordPress插件对设计师和它的结构的重要性。从下一部分开始,我们将深入了解WordPress插件的技术方面。

不要害怕复杂的PHP或JavaScript代码,因为我将以一种简化的方式介绍有关这些代码的所有必要细节,以适应Web设计人员。

呼之欲出

在下一部分中,我们将深入研究实际代码,学习创建插件所需的功能。实现插件所需的WordPress核心功能将从设计者的角度进行详细讨论。

在整个下一部分中,我们将构建一个模板,用于创建基于设计的插件。在此之前,我建议您阅读以下资源,并获得有关插件开发的想法。

  • 编写插件
  • WordPress短代码API

你可以在这里拿一个插件的副本。这个插件还不包括任何功能。因此,您只能看到它如何激活和禁用使用WordPress管理。

我已经做了我的解释,以一个简化的方式,以适应网页设计师。不过,我知道,对于基本上专注于HTML、CSS而不考虑JavaScript的设计师来说,这是很困难的。

所以,让我知道任何你不理解的评论部分,我会回到你的更简单的解释。另外,让我知道什么是你喜欢的滑块和为什么你投票给它。

让我们走下一步。

创建WordPress插件模板的基础

今天,我们将讨论创建以设计为重点的插件所需的核心WordPress理论和技术。我们的最终目标是学习WP插件开发,同时从零开始将jQuery滑块集成到WordPress中。

在本教程中,我们将学习使用示例滑块作为示例的必要编码技术。在本教程的末尾,您将有一个简单的模板,这是大多数基于设计的插件的共同之处。

下载原始文件。

基于设计的插件需要什么类型的文件?

请考虑下面的图像,它说明了用于创建基于设计的组件的通用插件中的文件。

wpbs_07

如您所见,JavaScript和CSS将保存在主插件中的单独文件夹中。主PHP文件包含插件定义和插件的重要初始化功能。如果您正在开发单个文件插件,所有代码都将保存在主PHP文件中。

虽然HTML是您作为设计人员最重要的文件类型,但它不会在给定的屏幕中显示为单独的文件。实际上,WordPress插件中不会有任何HTML文件。所有必要的HTML代码都是通过PHP文件生成的。

上面的屏幕显示了WordPress插件的基本文件夹和文件结构。我们可以添加必要的库和额外的文件来模块化我们的插件,以提高可重用性。

了解滑翔机的组件

在整个系列中,我们将集成一个jQuery滑块插件来学习WP插件开发。因此,熟悉jQuery滑块的主要组件非常重要,如下所示。

  • jQuery库-我们需要一个核心库来开发插件。选择jQuery作为本系列中使用的插件的核心库。您可以自由地使用其他核心库,如Prototype、Dojo、MooTools等。
  • jQuery插件文件-每个插件都有一个主文件,构建在jQuery库之上。通常,我们在单个JavaScript文件中有jQuery插件的所有代码。
  • 集成代码-所有插件都需要在某个时候被初始化才能工作。通常,我们在HTML文档的Head部分使用内联脚本来包含初始化代码。
  • 用于插件的CSS文件-大多数内容或图像滑块使用CSS提供幻灯片转换和动画。因此,我们有特定于插件的CSS文件,以提供滑块的默认外观和感觉。
  • 用于滑动的HTML或图像-滑块的最终组件是由插件转换成滑块的实际文本、图像或HTML内容。带有HTML和图像的无序列表是定义滑块所需数据的最流行技术。

现在,我们已经确定了jQuery滑块插件的主要五个组件。让我们专注于学习这些组件如何适合实际的WordPress插件。

包括WordPress插件中的脚本

我们的滑块插件目前包含两个JavaScript文件,第三个用于插件初始化代码。大多数初学者开发人员错误地将脚本错误地包含在WordPress插件中。

因此,本节将侧重于识别错误并学习如何避免这些错误,以便遵循最佳实践。

我假设本教程的大多数读者都是设计师。让我们看看如何在静态HTML网站中包含脚本文件。



  
  
  





我们基本上把所有的脚本文件硬编码到HTML文档或页脚部分的头部分。这不是一个问题,在现阶段,因为我们正在建设静态网站。现在,让我们看看这些脚本是如何包括在WordPress插件的开发人员谁是没有经验的WordPress。

包含脚本的错误方式

大多数缺乏经验的开发人员使用echo语句直接包含PHP文件中的脚本,如下代码所示。这被认为是插件开发中的一个不好的实践。

function fwds_scripts(){

 echo "";

 echo "";
}

代码在HTML文件中的任何位置打印脚本文件。它可以是页眉、页脚或身体,这取决于你放置的位置。尽管我们为WordPress主题有一个单独的标题,但是硬编码标题中的文件是不明智的。

在静态网站中,您可以管理这些文件,因为您将是唯一的设计人员。WordPress有一个基于插件的架构,因此任何人都可以编写插件。因此,使用上述技术复制相同文件的可能性很大。

收录脚本的正确方法

现在,考虑到上述技术的局限性,我们将研究包含脚本的正确方法。WordPress提出了一个名为动作挂钩的概念,它将在请求的特定点或系统中发生特定事件时执行。您可以定义要在这些执行点中调用的函数。

了解WordPress动作钩子的完整概念需要时间,即使对于有经验的WordPress开发人员来说也是如此。目前,把它看作是在特定点调用PHP函数的代码。考虑以下代码。

< ?php
function my_custom_function() {
  // Place the code to be executed here
}

add_action('action name', 'my_custom_function');
?>

我们可以用预定义的WordPress钩子替换动作名称,或者使用我们自己的自定义钩子。您必须对不同的操作使用不同的功能。深入了解动作钩子将在以后的教程中提供,当您对插件开发的基本知识感到满意时。

现在,让我们切换到包含脚本的正确方法。WordPress提供了一个名为wp_enQueue_script的预定义钩子,用于将脚本文件包含到页面中。在我们的自定义函数中,我们必须一个地包含脚本。考虑以下代码。


前面的代码使用wp_enQueue_script动作在执行过程中调用fwds_script函数。我使用fwds(第一个网页设计师滑块)作为我的功能的前缀。

建议在插件函数的前缀加上与插件名称相关的字符串,以避免与其他插件中的函数发生冲突。

在fwds_script中,我们使用了另外两个函数来包含名为wp_enQueue_script和wp_寄存器_script的脚本文件。WP_enQueue_Script用于将脚本文件包含到HTML文档中。

jQuery是与WordPress内置的库之一,因此我们可以直接包含它,如代码所示。这项技术将包括最新版本的jQuery。

WP_寄存器_Script用于将脚本文件注册到WordPress中。我们必须注册滑块插件文件和初始化文件,因为它不是内置的WordPress。第一个参数是注册库的唯一名称。

接下来,您必须提供js文件的路径。plugins_url函数将提供插件文件夹的URL。

第三个参数指定依赖库。在这个场景中,插件文件依赖于jQuery库。我们不需要使用这种技术来管理依赖关系。在注册任何脚本之前,WordPress检查它是否已经使用给定的唯一名称注册。只有在以前未加载文件时才加载该文件。因此,它将防止前面部分讨论的文件复制。

如果使用不同的名称注册相同的脚本文件,WordPress将无法处理文件复制。

SlidesJ的核心插件文件名为jquery.lides.min.js,我们已经将它包含在前面的代码中。此外,我们还将库的初始化部分包含在另一个js文件(名为glidesjs.initialize.js)中。下面的代码包含js文件中的初始化代码。

jQuery(function() {
    jQuery('#slides').slidesjs({
      width: 940,
      height: 528,
      navigation: false
    });
});

还有其他各种不使用wp_enQueue_script操作钩子包含脚本文件的推荐方法。这里讨论的技术足以让我们学习作为设计师的插件开发。当需要时,我还将介绍其他技术。

包括WordPress插件中的样式

通常,大多数jQuery插件都会提供内置的CSS文件,以提供其默认的外观和感觉。作为设计者,我们习惯于将CSS文件直接包含在HTML文档中。因此,WP插件开发的初学者试图应用与我在JavaScript部分中讨论过的方法相同的方法。

包含样式的错误方式

考虑下面的代码,看看初学者如何在WordPress插件中包含CSS文件。

function fwds_styles(){
  echo ";
  echo ";
}

代码将在HTML文档中的任何地方都包含样式文件,而不考虑文件复制。这与JavaScript的工作方式完全一样。

纳入风格的正确途径

包含样式文件的推荐方法与我们讨论的JavaScript文件方法完全类似。WP_enQueue_Scripts操作将再次使用不同的函数名来包含样式,如下面的代码所示。

add_action('wp_enqueue_scripts', 'fwds_styles');
function fwds_styles() {

wp_register_style('slidesjs_example', plugins_url('css/example.css', __FILE__));
wp_enqueue_style('slidesjs_example');
wp_register_style('slidesjs_fonts', plugins_url('css/font-awesome.min.css', __FILE__));
wp_enqueue_style('slidesjs_fonts');

}

在这种情况下,我们必须使用wp_寄存器_样式和wp_enQueue_样式,而不是使用脚本函数。用法和参数与脚本函数完全相似。

在这一部分中,我们使用SlidesJS来实现滑块插件。SlidesJS为银川网站建设设计样式提供了两个CSS文件,需要外观和感觉,还包括字体。

现在,我们了解了在WordPress插件中包含jQuery插件的脚本和样式的基本知识。通常,我们将插件的初始化代码内联在静态HTML文件中的脚本标记中。对于WordPress,最好将其添加到现有的js文件中,或者将其包含在新的js文件中,并使用推荐的方式加载。

使用短代码将内容分配给滑翔机

可将短代码视为可重用代码的别名。首先,我们必须在PHP函数中定义通用代码。然后,我们可以在主题、插件或页面编辑器中的任何地方访问它,使用为函数提供的别名。考虑下面的代码,最基本的使用WordPress短代码。

add_shortcode("my_shortcode", "my_shortcode_function");

function my_shortcode_function() {
return "

Hello Shortcodes

"; }

WordPress提供了一个内置方法,称为Add_短路,用于定义短代码。第一个参数是短代码的名称(别名)。第二个参数包含请求短代码时要执行的函数。我们从短代码中返回一个简单的字符串。

一些开发人员喜欢直接打印函数内部的短代码输出。您应该总是更喜欢从函数返回输出并在外部打印,如前面的示例所示。

然后,您可以使用[my_hostcode/]来引用多个位置上的公共代码。折叠屏幕显示了如何在WordPress中的POST或页面编辑器中使用短代码。

wpdd_part3_5

如下图所示,可以在主题或插件文件中使用具有do_短路函数的短代码。


简编的高级使用

在前面的示例中,我们使用了最基本的短代码形式。我们还可以在短代码中使用属性和内容来添加其他特性。考虑以下带有属性和内容的短代码。

[my_advanced_shortcode name="Nimesh" age="27"] Description about me [/my_advanced_shortcode]

这些类型的短代码包含开始和结束的短代码标记。放置在开始标签和结束标签之间的信息被认为是内容,而在开始标记中的键值对被认为是属性。下面的代码显示了如何在实际的短代码函数中提取这些信息。

function my_advanced_shortcode_handler( $atts, $content = null ) {
 extract( shortcode_atts( array(
    'name' => 'Rakhitha',
    'age' => '20'
    ), $atts ) );

 echo $name;
 echo $age;
 echo $content;
}

短代码的内容和属性将作为默认参数传递给短代码函数。我们可以使用$Content变量直接使用内容。在这里,你将得到“关于我的描述”作为内容。

处理属性并不像处理内容那样简单。我们必须从$attr数组中提取每个属性。我们可以使用如下所示的提取函数。我们用默认值定义所有属性。

如果属性提供了短代码,则默认值将被PASS值替换。最后银川网站建设设计,您可以使用$name和$age访问这些属性。

利用短码集成滑块

在前面的部分中,我们讨论了脚本、样式和初始化代码如何适合WordPress插件。滑块的最后一部分将是作为滑动内容的实际HTML或图像。短代码将是提供滑块内容的理想方法。现在,让我们看看图像是如何融入到短代码中的。

add_shortcode("1wd_slider", "fwds_display_slider");
function fwds_display_slider() {

$plugins_url = plugins_url();

echo '
'; }

现在,我们已经将所有必要的部分集成到WordPress插件中。但是我们仍然有一个静态内容的滑块。当我们可以动态添加滑块内容并创建多个滑块以便在多个位置使用时,插件的真正威力就来了。

现在您可以在这里下载WordPress滑块插件的静态版本。

将下载的插件复制到插件文件夹中,并使用管理仪表板激活。然后创建一个POST或页面,并在TinyMCE编辑器中插入[1wd_滑块/],然后单击发布按钮以查看滑块的工作状态。您将能够使用导航按钮来查看滑动的工作原理。

因此,使用我们在本教程中创建的模板,尝试用于多个jQuery库的滑块插件的静态版本。

Description: Slider Component for WordPress
Version: 1.0
Author: Rakhitha Nimesh
Author URI:  />License: GPLv2 or later
*/
function fwds_slider_activation() {
}
register_activation_hook(__FILE__, 'fwds_slider_activation');

function fwds_slider_deactivation() {
}
register_deactivation_hook(__FILE__, 'fwds_slider_deactivation');

add_action('wp_enqueue_scripts', 'fwds_scripts');
function fwds_scripts() {

wp_enqueue_script('jquery');

wp_register_script('slidesjs_core', plugins_url('js/jquery.slides.min.js', __FILE__),array("jquery"));
wp_enqueue_script('slidesjs_core');

wp_register_script('slidesjs_init', plugins_url('js/slidesjs.initialize.js', __FILE__));
wp_enqueue_script('slidesjs_init');

}

add_action('wp_enqueue_scripts', 'fwds_styles');
function fwds_styles() {

wp_register_style('slidesjs_example', plugins_url('css/example.css', __FILE__));
wp_enqueue_style('slidesjs_example');
wp_register_style('slidesjs_fonts', plugins_url('css/font-awesome.min.css', __FILE__));
wp_enqueue_style('slidesjs_fonts');

}

add_shortcode("1wd_slider", "fwds_display_slider");
function fwds_display_slider() {

$plugins_url = plugins_url();

echo '
'; } ?>

演示和挑战

wpdd_part3_4

现在,给你一个挑战:

如果您安装了插件并进行了检查,您将注意到它占用了940 px的全部宽度。在我们的演示网站上,滑块与侧边栏有重叠之处。问题是银川网站建设设计,你能自己做出反应吗?很简单

下一个

在下一部分中,我们将创建jQuery插件到WordPress的实际集成。而不是仅仅硬编码HTML或图像中的无序列表,我们将创建节,以动态上传图像和创建多个滑块通过选择首选图像。

在此之前,我建议使用以下资源来了解本教程系列的下一部分内容。

  • WordPress自定义邮政类型
  • 自定义邮政类型完整指南

现在轮到你了。

使用我们今天讨论的技术集成各种其他滑块。现在不要担心滑块目前是静态的。我将在下一部分中解释如何使它具有动态和可重用性。

让我知道你试过的滑块的类型,以及你在应用所讨论的技术时遇到的任何困难。

我们正在成功的道路上,下一部分是关于将插件集成到WordPress。

将您最喜欢的滑雪板集成到WordPress中

在第一部分中,我们确定了WordPress插件作为设计师的重要性和插件的基本结构。然后,通过为WordPress创建一个jQuery滑块,我们完成了开发插件所需的必要编码。现在我们将把它集成到WordPress中。

我希望你已经使用了滑块插件,并试图修复我们在演示中的响应问题。我们得到了很好的回应,其中包含了可能的解决方案。因此,我们将从第三部分开始,修复滑块中的响应问题。

下面是我们在前一部分中创建的演示的图像,说明了响应问题。

wpbs_09

SlidesJS响应

SlidesJS被设计为使用940 px作为其默认宽度。大多数网站都是在至少960px宽度的网格中设计的。因此,默认SlidesJS滑块将响应全宽度页面。在这个演示中,我们使用的是“二十一号”主题。

它不提供其默认页面或帖子的全部宽度。因此,我们必须调整滑块根据我们的主题,以使它的响应。

CSS媒体查询可以有效地用于使滑块响应。因此,让我们看看SlidesJS提供的默认媒体查询。


960px布局将适合768 px和979 px之间的媒体查询。对于特定的宽度范围,滑块容器定义为724 px。基本上,您要做的是根据主题、内容、区域、维度调整滑块容器的宽度。因此,更新的媒体查询以适应“21世纪11”主题如下。

您可以看到,我已经修改了所有媒体查询的宽度,以适应二十四个主题容器大小。现在让我们看看代码更新后的滑块。确保将媒体查询的这些样式添加到插件中的example.css文件中。

wpdd_part3_2

我们已经完成了响应版本的静态滑块为WordPress。但是,在我们启用通过WordPress仪表板动态添加图像的功能之前,它是无用的。让我们开始制作动态滑块。

动态滑块函数的规划

在当前版本的插件中,我们使用插件文件夹中的图像。但是我们想把我们自己的图像放在一个用户友好的方法中。此外,我们应该能够为我们银川网站建设设计的网站的不同位置创建多个滑块。让我们在这个部分中列出我们需要实现的功能。

  • 创建多个滑块
  • 通过WordPress媒体上传器动态上传银川网站建设设计:WordPress插件从无到有开发。
  • 在任何给定时间分配和删除滑块图像

对于熟悉使用PHP的人来说,实现这些功能并不是一项非常困难的任务。但是作为设计师,如果你没有PHP的背景,你可能会觉得有点难以理解。因此,我将尽可能简单地解释事情,以使你更容易。

另外,请记住,您不需要理解这里讨论的每一个细节。我会告诉你需要集中精力的任务和作为设计师你可以忽略的任务。因此,请继续关注,并准备好您的代码编辑器。

创建滑块-自定义邮政类型的角色

你们中的大多数人都会熟悉WordPress的文章。即使你没有在WordPress上开发或设计任何东西,很有可能你已经在WordPress博客上写了一篇文章。WordPress文章旨在为您的网站撰写文章、教程或一些内容。下面的银川网站建设设计:WordPress插件从无到有开发显示WordPress的POST创建屏幕。

短码编辑

通常我们会得到像帖子标题,文章内容,类别,特色银川网站建设设计:WordPress插件从无到有开发这样的字段来为特定的文章插入必要的数据。类似地,WordPress提供了一种称为自定义POST类型的技术。基本上,定制的帖子类型可以看作是一种特殊的帖子。

我们可以使用自定义的帖子类型,以创造一些惊人的设计和功能的WordPress。在本部分中,我们将使用特定的自定义POST类型来创建滑块。

最重要的是要记住的是,自定义的帖子类型不显示在正常的帖子部分,因此不会在您的博客上显示。我们有能力为这些帖子类型创建独特的设计,并决定我们应该在哪里显示它们。

创建滑块柱类型

我假设您已经安装并激活了我们在最后一部分中开发的插件的前一个版本。在这里,我将添加和修改插件的现有代码。

首先,我们必须为滑块注册一个新的POST类型。您可以将以下代码插入插件的1wd_slder.php文件的末尾。

add_action('init', 'fwds_register_slider');

function fwds_register_slider() {

    $labels = array(

       'menu_name' => _x('Sliders', 'slidesjs_slider'),

    );

    $args = array(

       'labels' => $labels,

       'hierarchical' => true,

       'description' => 'Slideshows',

       'supports' => array('title', 'editor'),

       'public' => true,

       'show_ui' => true,

       'show_in_menu' => true,

       'show_in_nav_menus' => true,

       'publicly_queryable' => true,

       'exclude_from_search' => false,

       'has_archive' => true,

       'query_var' => true,

       'can_export' => true,

       'rewrite' => true,

       'capability_type' => 'post'

    );

    register_post_type('slidesjs_slider', $args);

}

WordPress在用户请求的初始化过程中执行一个名为init的操作。我们可以调用init操作上的任何函数。在这里,我使用了一个名为fwds_寄存器_slder的函数。

在函数中,我们必须为自定义POST类型定义一些标签和参数。标签将决定在菜单项和表单上显示的文本。有许多参数可以配置自定义POST类型的各种特性。最后,我们使用寄存器_POST_TYPE函数注册自定义POST类型。

此函数的第一个参数将是自定义类型的名称。您可以使用任何唯一的名称。接下来,我们将参数作为第二个参数传递。

在这个阶段,作为WordPress的初学者,理解完整的代码和配置是不必要的。下面是Sliders的自定义POST类型部分的预览,一旦我们包含了这段代码。

wpdd_part3_9

如您所见,左侧菜单上有一个单独的Slider POST部分,标签被转换为我们在Label变量中使用的文本。

要关注的事情:

  • 每当您想要创建滑翔机、手风琴、Tabs或类似的设计组件时,请使用以下代码块,并为init操作使用新的函数名。
  • 在“标签”部分,根据您的喜好更改要显示的文本和唯一的POST类型名称。
  • 保持参数变量不变,不要担心当前使用的各种参数。
  • 最后,使用寄存器_POST_TYPE函数的标签数组中使用的相同的唯一名称。

每次使用具有不同功能和唯一POST类型的代码时,都会将新部分添加到左侧菜单中。现在尝试在仪表板中使用Sliders。

我们可以使用这个部分来创建滑块。但是,它仍然像普通的POST类型一样工作,不会做任何不同的事情。我们的下一个任务是将图像添加到滑块中。让我们继续前进。

创建滑块图像字段

我们必须向每个新的滑块插入不同的图像。WordPress元框可以有效地用于向滑块创建屏幕添加附加字段。考虑以下代码。

add_action('add_meta_boxes', 'fwds_slider_meta_box');

function fwds_slider_meta_box() {

    add_meta_box("fwds-slider-images", "Slider Images", 'fwds_view_slider_images_box', "slidesjs_slider", "normal");

}

function fwds_view_slider_images_box() {
    global $post;

    $gallery_images = get_post_meta($post->ID, "_fwds_gallery_images", true);
    // print_r($gallery_images);exit;
    $gallery_images = ($gallery_images != '') ? json_decode($gallery_images) : array();

    // Use nonce for verification
    $html =  '';

    $html .= '
'; $html .= "
"; echo $html; }

首先,我们必须在add_meta_box动作上调用一个新函数来为滑块创建一个元框。在函数内部,我们使用add_meta_box函数定义一个新的元框,如下代码所示。

function fwds_slider_meta_box() {

    add_meta_box("fwds-slider-images", "Slider Images", 'fwds_view_slider_images_box', "slidesjs_slider", "normal");

}

第一个参数是元框的唯一键,后面是元框标题。第三个参数是执行元框的新函数。第四个参数是我们在前面创建的唯一POST类型,您可以将最后一个参数留给它的默认值Normal。

然后,我们需要创建fwds_view_LEGILDER_FACES_BOX函数来实现元盒,在这个函数中,我们从数据库中获得当前滑块的可用图像值。我们可以使用滑块ID和一个键(_fwds_路图)将每个滑块的图像保存到数据库中。

在初始加载中,不会有任何现有图像,因此图库图像将为空。然后,我们使用HTML代码为图像创建字段。我在这里使用了5个文本框为每个滑块输入5个图像。

现在,您的滑块创建屏幕应该像下面的图像。

wpbs_04

要关注的事情:

  • 创建add_meta_box函数并使用相应的参数加载它。如果要创建2种类型的滑块,请使用2个add_meta_box函数。
  • 为要使用的每个滑块创建新的函数,如fwds_view_LEGILDER_TOMES_BOX。
  • 我已经使用了每个滑块5个图像。根据您的喜好添加或删除文本框,以获得每个滑块或多或少的图像。

将图像上传到滑翔机

现在我们可以开始上传银川网站建设设计:WordPress插件从无到有开发到滑块。只需单击SliderCreation屏幕上的Add Media按钮即可加载WordPress媒体上传器。然后上传银川网站建设设计:WordPress插件从无到有开发,就像你为普通帖子所做的那样。一旦上传了图像,您应该得到如下所示的屏幕。

wpdd_part3_1

在右侧指向部分的链接中,您可以选择是否将图像用作附件或媒体文件。选择媒体文件以获得上传图像的直接链接。现在复制链接并关闭上传窗口。

然后将复制的图像url插入到前面创建的Image 1字段中。对于要显示在滑块中的所有幻灯片,请继续此过程。

一旦所有的链接被填充,你的滑块创建屏幕将如下所示。

wpdd_part3_6

保存滑翔图像

我们已经上传并插入到滑块中。现在需要将图像保存到数据库中。即使图像字段在滑块创建屏幕中,它也不会在保存POST时自动保存。我们必须使用简单的代码将数据插入到数据库中,如下所示。

add_action('save_post', 'fwds_save_slider_info');

function fwds_save_slider_info($post_id) {

    // verify nonce

    if (!wp_verify_nonce($_POST['fwds_slider_box_nonce'], basename(__FILE__))) {

       return $post_id;

    }

    // check autosave

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {

       return $post_id;

    }

    // check permissions

    if ('slidesjs_slider' == $_POST['post_type'] && current_user_can('edit_post', $post_id)) {

       /* Save Slider Images */

       //echo "
";print_r($_POST['gallery_img']);exit;

       $gallery_images = (isset($_POST['gallery_img']) ? $_POST['gallery_img'] : '');

       $gallery_images = strip_tags(json_encode($gallery_images));

       update_post_meta($post_id, "_fwds_gallery_images", $gallery_images);

    } else {

       return $post_id;

    }

}

我们在Save_POST操作上调用一个自定义函数来将图像详细信息保存到数据库中。UPDATE_POST_META函数用于将这些详细信息保存到_fwds_path_Image键中。我将向您展示您需要在本节中了解的内容,因为对于设计初学者来说,这可能有点复杂。

要关注的事情:

  • 当您保存不同类型的文章,如滑块、手风琴、制表符时,请确保在Save_POST操作上创建新函数,并使用此代码块。
  • Inside the check permission section, use your own post type instead of slidesjs_slider.
  • Use your own unique key like _fwds_gallery_images to save the data into the database.

现在,当滑块发布时,所有图像都将保存到数据库中。然后单击左侧菜单中的Sliders部分,您将得到如下图像所示的列表。

wpbs_08

您将能够看到一个单独的速记在前面的每一个滑块您创建。一旦我们完成下面的部分,您可以使用这些来生成滑块。

使用上传区段生成滑块

在前面的部分中,我们使用了一个短代码函数来将图像包含到滑块上,如下面的代码所示。

add_shortcode("1wd_slider", "fwds_display_slider");
function fwds_display_slider() {

 $plugins_url = plugins_url();

 echo '
'; }

如您所见,在这个版本中,所有的图像都是硬编码的。现在我们可以选择使用动态滑块以及动态图像。因此,让我们转到实现这个短代码。

add_shortcode("1wd_slider", "fwds_display_slider");

function fwds_display_slider($attr,$content) {

    extract(shortcode_atts(array(

               'id' => ''

                   ), $attr));

          $gallery_images = get_post_meta($id, "_fwds_gallery_images", true);

          $gallery_images = ($gallery_images != '') ? json_decode($gallery_images) : array();

          $plugins_url = plugins_url();

         $html = '
'; foreach ($gallery_images as $gal_img) { if($gal_img != ""){ $html .= ""; } } $html .= '
'; return $html; }

现在,我们使用传递给这些短代码的POST ID来动态检索图像。然后,我们使用Foreach循环将每个图像分配给滑块。最后,我们返回要显示在页面中的结果滑块。

要关注的事情:

  • 您可以使用带有特定键的get_post_meta函数加载保存在数据库中的任何类型的详细信息。
  • 我们可以将任意数量的属性传递给短代码,您必须将它们包含在提取函数中才能检索值。
  • Here we are getting image links from database. You can get and save any type of information using the get_post_meta function according to your shortcode type.

现在我们已经完成了这个部分的滑块插件,您可以尝试创建具有不同图像的滑块。创建后,将短代码从列表中复制并插入到帖子或页面中,以查看其运行情况。

下面的银川网站建设设计:WordPress插件从无到有开发显示了我们滑块的预览。

wpdd_part3_8

接下来是什么?

在这一部分,我们完成了滑块功能。现在,它的动态和有效,以适应各种类型的节在您的网页。

滑块的大小、效果、速度如何?

当然,当你有选择和设置来定义插件的功能时,插件会变得更加用户友好和可定制。因此,在下一部分,我们将添加选项,我们的滑块,以完成这个插件开发系列的初始部分。

在下一部分结束时,您将能够使用这里讨论的技术为UI组件创建基本的WordPress插件。在那之前,我希望你能用不同的滑块来实践这些理论。

你能解决这些问题吗?

在前一部分中,我要求您修复滑块中的响应问题。在这一部分,我提供了更多的问题来解决和学习。试一试,让我知道它是如何进行的。

  • 您能在滑块中插入选项并在短代码中使用吗?
  • SlidesJS滑块不会自动播放。您能找到如何将其设置为自动滑动吗?

期待你的回答。

Wrap Up

在这一部分中,我被迫省略了对每一行代码的解释,因为它会给作为网页设计师的您带来复杂性。您的重点应该是使用此代码,并创建不同类型的滑块以及其他组件,而不必过多地担心复杂的代码。

到现在为止,您应该能够插入另一种类型的滑块到同一插件与我给出的东西,重点部分的指示。

让我知道它是如何进行和任何帮助,你需要在制作不同的滑块使用这个插件。

添加功能增强WordPress插件

在这里,我们将通过学习如何为滑块创建WordPress插件设置页面来完成插件的基本结构。请继续关注设置,因为设置是自定义插件功能的一个重要部分。我们开始吧。

下载原始文件。

注意,为了测试最终版本,您必须在WordPress安装上安装它。

什么是WordPress插件设置页面?

在任何类型的系统中,配置设置都定义系统开始工作之前需要启动的数据。这些设置决定了系统的功能和功能。

考虑SlidesJS滑块,我们通过最后三个部分开发了它。我们没有任何配置设置,因此我们必须坚持默认功能。这个滑块并不适合每个WordPress主题,也不是每个设计师都会喜欢默认的功能。

因此,理想的选择可以改变插件的现有行为,以满足每个用户的需求。让我们假设我们需要自动播放滑块或改变现有的过渡间隔,因为它太慢了;不幸的是,我们目前没有设置,我们需要使用插件提供的内容。

在接下来的几节中,我们将以不同的方式添加选项,以允许我们定制插件。

SlidesJS滑翔机的规划设置

SlidesJS自带数十个配置选项。在本教程中,我将使用这些配置中的一些来帮助您理解WordPress上插件设置的创建过程。

下面是我们将在本教程中实现的配置列表。

  • Play button – Sliders can contain a button for play/pause functionality. We can enable or disable play button in the common settings page.
  • Autoplay – Most sliders will play automatically when they’re loaded. We can enable or disable autoplay in the common settings page.
  • Effects – Sliders have multiple transition effects. Currently we are using the slide effect. We can allow the user to choose the effect from the common settings page.
  • Transition Duration – is the time between slide transitions. Sometimes we need it to transition faster or slower depending on the type of content. We can use the common settings page to configure transition duration.

现在,我们已经确定了必要的设置,包括在插件。让我们继续构建通用插件设置页面。

为插件设置创建管理菜单页

WordPress没有为插件选项提供特别设计的页面。我们可以使用管理菜单页面或选项页来生成配置选项所需的HTML表单。我将使用管理菜单页面来实现这些选项。

首先,我们必须使用以下代码将页面添加到左侧菜单。

add_action('admin_menu', 'fwds_plugin_settings');

function fwds_plugin_settings() {

    add_menu_page('1stWD Slider Settings', '1stWD Slider Settings', 'administrator', 'fwds_settings', 'fwds_display_settings');

}

我们必须使用名为admin_Menu的操作来添加一个新菜单项,而fwds_plugin_set是添加页面的函数的名称。

在这个函数中,我们可以使用内置的Add_Menu_Page来创建菜单项。一旦您将上述代码包含在插件中,您将能够看到如下所示的屏幕。

wpbs_02

尽管这不是强制性的,但是对add_Menu_Page函数的参数有一个大致的了解还是比较理想的。

  • 参数1(1stWD滑块设置)-是HTML页面中使用的标题。
  • 参数2(1stWD滑块设置)-是左菜单上菜单项的标题。
  • 参数3(管理员)-是添加页面所需的功能。在大多数情况下,您可以保留它作为管理员。
  • 参数4(Fwds_Set)-是用于菜单项的唯一键。
  • 参数5(Fwds_Display_Set)-是用于实现HTML表单的函数名。

了解了参数之后,让我们实现添加设置字段所需的HTML表单。

function fwds_display_settings() {

    $slide_effect = (get_option('fwds_effect') == 'slide') ? 'selected' : '';

    $fade_effect = (get_option('fwds_effect') == 'fade') ? 'selected' : '';

    $interval = (get_option('fwds_interval') != '') ? get_option('fwds_interval') : '2000';

    $autoplay  = (get_option('fwds_autoplay') == 'enabled') ? 'checked' : '' ;

    $playBtn  = (get_option('fwds_playBtn') == 'enabled') ? 'checked' : '' ;

    $html = '

Select Your Settings

' . wp_nonce_field('update-options') . '
';

    echo $html;

}

首先,我使用了五个变量从数据库中获取设置的当前值。最初,所有这些选项都是空的,因此我在必要时添加了默认值。我们可以使用GET_OPTION函数从数据库中检索任意选项值。

那么最重要的是形式动作。因为我们正在创建一个选项页面,所以我们可以使用options.php作为操作。

之后,我们为配置设置创建必要的字段。转换效果设计为一个下拉框,以包含SlidesJS滑块中的两个效果。我们使用自动播放和播放按钮选项的复选框。过渡期间将使用文本框。

在正常情况下,我们需要在表单提交后手动保存这些值。幸运的是,WordPress提供了一个内置的方法来更新选项,而无需使用任何额外的代码。您所要做的就是用预定义的值在表单中指定两个隐藏字段。

第一个字段应该命名为action,而它的值应该是更新的。下一个隐藏字段应该命名为Page_Options。它的值应该包含以逗号分隔的表单中的所有字段名。

就这样输入值并按“更新”按钮后,值将自动保存,您的“选项”页面应类似于以下内容。

wpdd_part3_3

现在我们有了初始化滑块的配置选项的值,最终的任务将是使用这些设置来动态初始化滑块。

用动态配置设置初始化滑块

我们的滑块初始化代码驻留在幻灯片js.initialize.js文件中。我们需要一个方法将动态配置的设置传递到JavaScript文件中,所以让我们看看如何修改fwds_script函数并将数据传递给JavaScript文件。

function fwds_scripts() {
    wp_enqueue_script('jquery');
    wp_register_script('slidesjs_core', plugins_url('js/jquery.slides.min.js', __FILE__), array("jquery"));
    wp_enqueue_script('slidesjs_core');

    wp_register_script('slidesjs_init', plugins_url('js/slidesjs.initialize.js', __FILE__));
    wp_enqueue_script('slidesjs_init');

    $effect      = (get_option('fwds_effect') == '') ? "slide" : get_option('fwds_effect');
    $interval    = (get_option('fwds_interval') == '') ? 2000 : get_option('fwds_interval');
    $autoplay    = (get_option('fwds_autoplay') == 'enabled') ? true : false;
    $playBtn    = (get_option('fwds_playbtn') == 'enabled') ? true : false;
    $config_array = array(
            'effect' => $effect,
            'interval' => $interval,
            'autoplay' => $autoplay,
            'playBtn' => $playBtn
        );

    wp_localize_script('slidesjs_init', 'setting', $config_array);

}

包含脚本的初始部分将类似于我们在前一部分中使用的代码。首先,我们需要使用get_opt函数从数据库中获取配置的选项值,就像我们前面使用的那样。然后,我们必须将所有值赋值到要传递给脚本的数组中。

WordPress提供了一个名为wp_localization_script的方法,用于将值传递给JS文件。该函数的第一个参数是用于所需的js文件的键。然后,我们可以定义变量名,用于访问JavaScript文件中的值。最后,将选项值数组传递给函数。

然后,我们需要按以下方式修改初始化脚本,以便动态地接受值。

jQuery("#slides").slidesjs({
    navigation: false,
    play: {
      active: setting.playBtn,
      effect: setting.effect,
      auto: setting.autoplay,
      interval: setting.interval,
    },
  });
});

我们可以使用SlidesJS配置中定义的Play数组配置在Options页面中使用的所有选项。可以使用设置变量访问任何值。

最初的计划还包括滑块尺寸的配置,但是SlidesJS中的宽度和高度配置并不像文档所描述的那样工作。维度是从CSS和插件文件中分配的,因此很难启用配置,因此我在这里省略了它。

现在,我们已经完成了我们的插件与一些基本的配置选项。一旦启用所有选项(包括Play按钮),滑块的最终输出将类似于下面的图像。

在本系列文章中,我们了解了如何从零开始构建基于WordPress插件的设计。现在,您应该对开发一个简单的插件有了更好的理解。现在是时候让我们继续学习这些例子了。除非你实践这些理论,否则你不会成为一个优秀的插件开发者。因此,一定要尝试不同的滑块和配置不同的选项,以获得一个更好的理解插件开发。

带走的东西

我们详细地讨论了许多理论和技术。现在,我将总结一下这个插件开发系列中最重要的东西,以便让您开始练习。你应该知道:

  • 如何定义插件和文件结构
  • 如何包含CSS和JavaScript文件并动态传递数据
  • 使用自定义POST类型为组件创建不同类型的数据
  • 如何使用自定义文章中的额外字段
  • 如何创建插件选项页

我建议您至少再尝试三种方法来理解这些概念。一旦您完成了该任务,您就可以使用相同的技术创建类似手风琴、制表符或其他类似组件的东西。