跳到主要内容

构建响应式WordPress产品组合

Web开发可能会迅速发生变化,但仍有两件事需要继续使用WordPress和响应式设计。知道如何构建响应式WordPress主题和插件是必须的。在本教程中,我们将介绍如何为响应式产品组合构建WordPress插件和主题模板。

我们将使用两个模拟的模板:一个存档页面,它将列出所有最近的项目,一个页面,它将显示一个特定的项目。投资组合的存档页面非常简单,有一个标题和三列全宽项目。随着屏幕变小,这将缩小为两列,然后是一列。 HTML和CSS是可在GitHub上找到。页面上的每个项目都将具有此结构。

观看本教程的独家截屏视频:

这是由WordPress循环生成的HTML:

网站名称

简短说明和链接阅读更多...

单个页面将具有类似的布局,将所有文本包装在一个名为的容器中。项目代替。卡。 CSS也将相当轻量级和缩放。您可能还会在站点文件中注意到有一个Style.scss文件。我使用Sass开发了所有的CSS,但不要担心:生成的Style.css文件以可读的方式编译。

创建新的自定义帖子类型

自定义帖子类型是WordPress中的一个对象,它允许我们向WordPress编辑器添加我们想要的任何类型的内容,以与帖子相同的方式对待它们。在新的WordPress安装中,有帖子和页面的菜单选项。这些都被认为是以不同方式处理内容的帖子类型。使用自定义帖子类型,我们可以为WordPress管理菜单添加用于创建新类型内容的选项。我们将创建一个名为Portfolio的自定义帖子类型。

我们将开发此自定义帖子类型作为投资组合项目的更大WordPress插件的一部分。虽然我们可以为主题添加功能,但这是不好的做法,因为我们的内容与我们的设计相关:如果我们改变主题,我们就会失去投资组合。我们将通过两种方法处理显示:模板/模板标签,以及可以通过编辑器使用的短代码。

第一步是定义插件。在中创建一个文件夹/可湿性粉剂内容/插件/并根据自己的喜好命名。我把我的名字命名了/ JLC项目/。在该文件夹中,创建一个同名文件(例如,JLC-projects.php)并添加此代码:

这里有一些事情发生。第一个是WordPress插件的标准插件定义;接下来的几行创建常量,然后包含插件所需的其余文件。此时,只有一个其他文件:JLC-项目cpt.php

您还会注意到我正在使用前缀JLC_(或jlc-)来处理所有事情。您应该选择自己的前缀来使用。前缀变量和函数名称将减少插件与其他主题或插件冲突的可能性。

The admin page to add a new project. Notice the Project Link section

用于添加新项目的管理页面。请注意Project Link部分

在我们进入之前JLC-项目cpt.php,我想再添加一点代码JLC-projects.php。下面的代码将创建一个新的图像大小,我们将使用自定义帖子类型:

if(function_exists('add_theme_support')){add_theme_support('post-thumbnails'); add_image_size('jlc_project',1100,640,true); }

现在是时候创造了JLC-项目cpt.php。我只会在这里讨论重要的代码,但你可以在GitHub Repo上找到完整的代码。首先(开幕后我们定义自定义帖子类型:

add_action('init','jlc_projects_register'); function jlc_projects_register(){$ args = array('label'=> __('Portfolio'),'singular_label'=> __('Project'),'public'=> true,'show_ui'=> true,'capability_type '=>'post','hierarchical'=> true,'has_archive'=> true,'supports'=> array('title','editor','thumbnail'),'rewrite'=> array('slug '=>'portfolio','with_front'=> false)); register_post_type('portfolio',$ args); register_taxonomy(“jlc-project-type”,array(“portfolio”),array(“hierarchical”=> true,“label”=>“Project Type”,“singular_label”=>“项目类型”,“重写”= > true)); }

这是您的标准自定义帖子类型定义功能。我们添加一个动作来在init上调用它,然后发送我们的参数列表Register_post_type(),以及类型的slug,这将是'投资组合'。注册帖子类型后,我们注册自定义分类以与帖子类型一起使用。将这两个功能保持在一起非常重要。如果你不这样做,并且分类法首先被注册,WordPress将抛出一个错误。

定义自定义帖子类型后,是时候添加我们想要使用的自定义元数据了。我们的自定义帖子类型支持标题,编辑器(将用作正文文本)和缩略图,这是特色图像的去向。还有一件事我想添加到我的投资组合部分:我正在展示的网站的URL。首先,我们将创建将在admin中添加此框的功能:

add_action(“admin_init”,“jlc_projects_admin_init”); function jlc_projects_admin_init(){add_meta_box(“jlc-projects-meta”,__(“Project Link”),“jlc_projects_options”,“portfolio”,“side”,“low”); function jlc_projects_options(){global $ post; if(defined('DOING_AUTOSAVE')&& DOING_AUTOSAVE)返回$ post_id; $ custom = get_post_custom($ post-> ID); $ link = $ custom [“jlc_projects_link”] [0]; ?> 

这些功能相当简单。当管理员启动(即加载)时,我们将调用一个名为的函数jlc_projects_admin_init()这将为项目组合项创建一个新的元框。为了生成那个盒子,一个新的功能,Jlc_projects_options(), 叫做。

一旦进入选项功能,我们只是抓住了链接价值,我们称之为Jlc_projects_link,打印出来。但首先,我们要确保不执行自动保存。如果是,我们可能会丢失数据。之后,我们需要在保存帖子时实际保存元数据:

add_action('save_post','jlc_projects_save'); function jlc_projects_save(){global $ post; if(已定义('DOING_AUTOSAVE')&& DOING_AUTOSAVE){return $ post_id; } else {update_post_meta($ post-> ID,“jlc_projects_link”,$ _POST [“jlc_projects_link”]); }}

通过创建自定义帖子类型的管理部分,是时候添加一些前端功能来帮助向访问者显示我们的项目。这包括归档模板,单页模板和短代码(本教程未涉及)。但在我们这样做之前,我们还将创建另一个用于显示图像的功能:Picturefill.js

这段JavaScript(你可以找到GitHub回购这里)允许您定义一组媒体查询,以将图像切换为更友好的版本,使其达到正在查看的屏幕大小。这也会影响加载时间,因为您可能会认为较小的屏幕意味着使用4G,3G甚至EDGE的移动设备。我知道情况并非总是如此,但总比没有好。

The HTML template used here, at full width. It's a simple header with three columns of projects

这里使用的HTML模板,全宽。这是一个包含三列项目的简单标题

您可以在GitHub仓库中看到标准picturefill元素的标记模式。我们可以拥有无限数量的我们拥有的每个图像大小的元素。没有JavaScript的用户也会有后备。可以想象,由于WordPress使用Media Uploader创建了我们上传的每个图像的多个版本,因此它非常适合picturefill.js。我们应该做的第一件事是加载脚本,该脚本位于/ JS /我们的插件目录中的文件夹。我们将以下代码添加到JLC-projects.php

function jlc_projects_scripts(){wp_enqueue_script('picturefill',JLCP_PATH.'js / picturefill.js',array()); } add_action('wp_enqueue_scripts','jlc_projects_scripts');

这将加载我们的JavaScript与其他插件加载的脚本。它还将确保我们不会多次加载picturefill.js。

由于我们的项目将使用精选图像部分来显示屏幕截图,我们可以使用。替换默认的精选图像标记Post_thumbnail_html过滤。请注意,此功能实际上将替换网站上所有特色图像部分。如果这可能导致冲突(可能会发生冲突),您应该向插件添加一些条件,以确保此过滤器仅用于组合页面。

add_filter('post_thumbnail_html','jlc_projects_get_featured_image'); function jlc_projects_get_featured_image($ html,$ aid = false){$ sizes = array(,'thumbnail','medium','large','jlc_project','full'); $ img =' '; $ ct = 0; $ aid =(!$援助)? get_post_thumbnail_id():$ aid; foreach($ sizes为$ size){$ url = wp_get_attachment_image_src($ aid,$ size); $ width =($ ct <sizeof($ sizes)-1)? ($ url [1] * 0.66):( $ width / 0.66)+25; $ img。=' 0)? 'data-media =“(min-width:'。$ width .'px)”> ':'> '; $ CT ++; } $ url = wp_get_attachment_image_src($ aid,$ sizes [1]); $ img。='  “;返回$ img; }

这里有一些事情发生。首先,该函数具有我们想要使用的WordPress中所有图像大小的数组。如果您定义了自己的尺寸,则必须在此处添加。这样就可以准确地填充picturefill元素。经过一些设置(定义图像大小,打开图片填充元素,初始化计数器)后,它会移动到$大小,为每个打印图像条目。

对于每个条目,wp_get_attachment_image_src()被调用来根据图像的ID获取图像的URL(其中get_post_thumbnail_id()根据帖子ID和大小返回。wp_get_attachment_ image_src()返回一个数组,其中包括图像,宽度,高度以及是否裁剪。此处还有一些数学计算来计算何时确定断点,以及如何处理缩略图图像。我不打算在此详细讨论这个问题,但值得注意的是,这是一个需要解决的重要问题,也是一个解决方案正在快速发展的问题。

现在,只要我们获得帖子的缩略图,返回的HTML将来自我们的功能。

创建存档页面

接下来,我们将为新的自定义帖子类型创建存档模板。这是默认显示的内容,将作为我们的主要投资组合页面。

A portion of the archive template displayed on a mobile-sized screen. The cards shrink to single column with centered images

存档模板的一部分显示在移动大小的屏幕上。卡片缩小为具有居中图像的单列

(注意:我们不会在本教程中创建网站的主页,但这样做需要使用模板标记或短代码来执行自定义循环WP_Query。)

在您正在使用的任何主题目录中创建一个新文件并调用它归档portfolio.php。 WordPress的模板层次结构足够聪明,知道当用户在投资组合页面时,它应该使用此模板显示内容。我此时的建议是复制Page.php文件此模板的模板。我们将简单地替换Loop部分。

我建议您使用没有侧边栏或单列模板的模板。这里引用的CSS可以更好地工作。这是我们的循环看起来像:

这应该非常简单。因为我们正在替换默认的HTMLThe_post_thumbnail(),使用哪个图像的参数无关紧要,因为所有尺寸都将使用picturefill.js标记返回。我选择使用Get_the_excerpt()为了排除包含的任何标记The_excerpt()

在设计包含一些CSS的插件时,重要的是尽可能减少它,以便它不会与主题的CSS对齐,或者让用户能够完全排除CSS。由于我们在主题中创建模板,因此我们有更多的摆动空间。这是我在存档页面上添加到每个项目的(Sass生成的)CSS的一部分:

.card img {display:block;保证金:0自动; } @media screen and(min-width:45.88em){。card {display:inline-block;宽度:40%; @media screen和(min-width:54.62em){。card {width:44%; @media screen和(min-width:76.38em){。card {width:29%; @media screen和(min-width:99.4em){。card {width:30%; }

我已确定哪些断点最适合并排放置项目卡。我也自动制作了精选图像中心。

创建单个页面

现在我们将为项目组合项目创建单一模板。每当用户访问单个项目的页面时,这将显示。在主题中创建一个新文件,然后调用它单portfolio.php并复制另一个模板粘贴在那里(我建议您使用的任何东西归档portfolio.php)。这次我们将使用以下代码替换Loop:

ID); if($ jlc_link){?> 访问网站

这看起来与归档模板类似,但我们在这里调用了一个额外的函数:jlc_projects_get_link()。我们将这个添加到我们的插件中,它将返回当前项目的URL。

The single project view. The project reduces in width as the page grows to keep the text easy to read

单个项目视图。随着页面的增长,项目的宽度会减小,以使文本易于阅读

如果没有URL,则应返回false并且不显示任何按钮。这是函数(位于JLC-projects.php) 好像:

function jlc_projects_get_link($ id){$ url = get_post_custom_values('jlc_projects_link',$ pid); return($ url [0]!='')? $ url [0]:false; }

这个页面的CSS很大程度上取决于主题:我使用了一些CSS来生成一个漂亮的按钮。确保您自己创建的CSS不会干扰主题。

结论

到目前为止,我们已经创建了一个插件,用于为投资组合添加新的自定义帖子类型,集成picturefill.js以更好地处理图像,并创建了两个主题模板来显示信息。

本教程的GitHub Repo包含此处显示的所有代码,以及我使用的主题,短代码和模板标记。

乔卡萨博纳

这篇文章最初出现在网络杂志问题254。



翻译字数超限