为WordPress主题开发人员介绍Shopify主题

Shopify为Wordpress主题开发人员

大多数人已经知道WordPress是世界上最流行的CMS(内容管理系统)。这些数字是惊人的。目前占据着全球CMS市场近60%的市场份额,大多数开发人员在过去至少参与过一ob欧宝娱乐app下载地址个WordPress项目也就不足为奇了。

WordPress是一个基于web的,用PHP编写的开源网站创建工具。我经营一家免费在线培训课程为WordPress开发者提供Shopify主题的概述。

在这次培训中,我分享了WordPress主题和Shopify主题之间的一些比较和相似之处。我已经将这些比较和相似之处汇编成一篇文章,这样你就可以快速提升你的Shopify主题,特别是如果你过去已经用WordPress进行主题化。

需要注意的是,本文假设您对WordPress主题化有基本的了解。如果您对其中一些概念不熟悉,我提供了有关这些主题的进一步阅读的链接。

或者,了解更多关于构建主题的信息Shopify metafields

WordPress vs. Shopify

Shopify

Shopify是一个托管平台,这意味着你不能在自己的服务器或第三方托管提供商(如GoDaddy)上托管Shopify。从这个意义上讲,它与WordPress非常不同,WordPress可以在本地安装,也可以安装在任何可以运行PHP并拥有mySQL数据库的服务器上。

托管平台为您的客户带来了一些非常惊人的好处,包括无限带宽、每日备份、PCI遵从性和默认情况下带有在线商店的SSL证书。欧宝体育官网入口首页

Shopify也是为商业而建的。这意味着它是一个专门的销售平台。这意味着它有很多开箱即用的功能,比如集成支付网关、运输、Shopify部分(我将在后面详细讨论),以及更多。这也意味着在Shopify主题商店中找到的任何主题都支持我们的功能。组件的样式是开箱即用的,看起来没有添加任何东西。

WordPress

WordPress (CMS)是自托管的,这意味着你可以在任何服务器上托管你的WordPress站点,只要该服务器可以运行一个体面的版本PHPmySQL.这在开始时确实具有成本效益,但一旦业务开始扩展,支付带宽和保证正常运行时间OB欧宝娱乐APP变得更加难以管理,而且成本更高。

WordPress最初是一个博客平台,然后成为一个非常流行的CMS。为了让WordPress拥有电子商务功能,它需要添加,通常是像WooCommerce这样的插件。

找到你的新宠减价编辑器在我们的综述中。

基本内容元素

在所有的内容管理系统中,我们都有基本的内容元素,即内容的类型。在WordPress中,这些是自定义的帖子类型、帖子和页面。在Shopify中,主要的内容类型包括集合、产品、文章(博客中的单独帖子)和页面。

WordPress

Shopify

自定义帖子类型

(又名集合。产品类别,但仍然不同于标签)


产品

的帖子

文章

页面

页面

为了简单起见,我选择根据存在什么类型的主题模板以及最常用的模板来比较它们。然而,在WordPress和Shopify中存在比上面列出的内容类型和模板更多的内容类型和模板。

扩展功能

所以,如果一个主题没有提供我们想要或需要的功能怎么办?这通常是当我们需要扩展平台的功能以满足我们的需求时。

WordPress

Shopify

插件

---

您可以独立下载它们并将它们上传到WordPress,或者直接在WordPress UI中下载它们。

应用程序

---

通过Shopify应用商店下载它们,如果你登录了,它们会自动安装到你的Shopify商店。

在WordPress的情况下,您将安装插件来扩展平台的功能。例如,WordPress开箱即用不包括电子商务组件,所以我们需要安装WooCommerce插件来启用某些自定义帖子类型和电子商务功能。

Shopify应用商店和主题为WordPress
Shopify应用商店。

对于Shopify来说,这种扩展功能以应用程序的形式体现出来。你可以在Shopify应用商店.要在Shopify商店中安装应用程序,只需到应用程序选项卡中的Shopify管理主菜单,并单击访问Shopify应用商店.然后你可以选择你想要安装的应用程序,它们将安装到你的商店中。安装完成后,你会看到商店中安装的所有应用程序的列表应用程序选项卡,类似于你会看到所有WordPress插件的列表插件选项卡。

父主题和子主题

在WordPress以及Drupal等其他内容管理系统中,有父主题和子主题的概念。然而,需要注意的是,Shopify目前并没有类似的概念。Shopify中的主题不会自动更新。由于没有自动更新,这意味着您不需要担心对现有主题的自定义被覆盖。

更新主题您需要下载最新版本并将其上传到您的商店。如果您已经进行了自定义,那么不幸的是,您需要将这些自定义移到新更新的主题中,或者使用版本控制来检查差异,然后进行必要的更改。

Shopify主题结构vs. WordPress主题结构

Shopify主题使用液体用于模板的语言,它允许开发人员动态地将内容加载到店面。Liquid是一种由Shopify创建的开源模板语言,用Ruby编写,也用于像变身怪医模板。

WordPress主题是用PHP编写的,并且有各种各样的命名约定。我在下面附上了一个最新的2017主题与一个典型的Shopify主题的例子。

WordPress

Shopify

二千零一十七/

| -公司/

| -资产/

| -模板/

| - screenshot.png

| - style.css

| -…template.php
(大约有13个)

my-shopify-theme /

|-资产/

|-配置/

|-/ /布局

|-地区/

|-部分/

|-片段/

|-模板/

每个Shopify主题目录都包含不同的文件类型,包括Liquid模板、图像、CSS、JSON和JavaScript。如果您有兴趣了解更多信息,我已经将每个目录链接到相应的文档,以便您可以进一步阅读。

重要的是要注意,如果您的主题包含任何额外的目录,这些额外的目录将被省略,当主题上传到Shopify。Shopify将只接受这种目录结构,并为其主题使用这种特定的命名。

我想指出几个特定的目录,它们映射到WordPress中的类似概念。这些包括:

WordPress

Shopify

自定义插件

显然也(在您的子主题中)

---

这些控件控制主题的定制面板。

部分/

配置/ settings_schema.json

---

这些控件控制主题的自定义主题页面。

index . php

---

该文件包含主题的页眉和页脚内容,以及呈现模板的动态“内容”区域。

布局/

---

这个目录包含theme.liquid,其中包括主题的页眉和页脚以及动态内容呈现模板的区域。

主题目录中的模板文件

---

各种页面、帖子和主题模板位于WordPress的主题目录或创建的子目录中。

模板/

---

页面、产品、集合、文章和所有其他模板都可以在此目录中找到。

公司/(又名。包括)

---

该目录包含可重用PHP代码的较小片段。

片段/

---

此目录包含可重用Liquid代码的较小片段。

Shopify节和配置

部分/目录包含主题的节,这些节是可重用的内容模块,可以由主题的用户自定义和重新排序。的自定义主题页面会让你想起WordPress定制面板.可以编辑或创建它们主题的选择部分模板.主题选项和节在Shopify中非常容易定制,因为它们使用简单的JSON对象来组织选项数据。

你可能还喜欢:主题选项介绍

静态部分都类似于WordPress小部件,因为您可以在模板文件中为它们注册一个区域,然后可以通过输入、选项和选择器对它们进行定制自定义主题页面面板。

Shopify为WordPress主题开发者-自定义主题编辑器面板

Shopifytheme.liquid与WordPressindex . php

Shopify的theme.liquid模板类似于index . php在WordPress主题中找到的文件。它包含主题的页眉和页脚,以及呈现其他模板的动态内容区域。也可以在布局/目录是顶级布局的液体文件,用于呈现礼品卡,和密码页面

模板

模板/目录包含所有其他Liquid模板,包括客户帐户模板。模板中通常包含较小的代码片段片段/目录中的内容区域中呈现的模板theme.liquid文件,它控制整个主题的包装布局。

片段

片段/目录包含所有主题的液体片段文件,这是代码位,可以在主题的其他模板中引用。

您可以使用Liquid include标记将代码片段加载到主题中。snippet非常类似于公司/目录。

资产管理

所有你上传到资产/目录都托管在我们的CDN上。CDN代表内容交付/分发网络,这意味着我们可以非常快速地提供资产,即使在商店中有大量流量时也是如此。

资产包括图像、CSS和JavaScript文件。您还应该知道Shopify具有编译Sass的能力,因此您可以使用Sass进行主题开发而无需编译器。请注意,Shopify目前运行的是Sass 3.2。

WordPress

Shopify

显然也

---

用于正确地引用CSS和脚本文件为您的主题。

液体过滤器theme.liquid文件

---

使用适当的液体过滤器中的CSS、JS和其他文件资产/目录中。

在WordPress中,显然也通常,你可以在主题中使用WordPress钩子,这是一个庞大的WordPress动作和过滤器的集合,几乎可以改变WordPress所做的一切。与此形成对比的是,Shopify使用Liquid过滤器来引用文件中包含的各种资产资产/目录中。

要引用样式表,只需在< >头元素中theme.liquid文件:

{{'theme.css' | asset_url | styleset_tag}}

在哪里theme.css希望链接到主题的样式表的名称。它将渲染一个完整的<链接>元素中添加适当的hrefurl到CDN上的样式表。

你也可以使用下面的代码来引用JavaScript:

{{'scripts.js' | asset_url | script_tag}}

在哪里scripts.js是要链接到主题的JavaScript文件的名称。

你可能还喜欢:img_url过滤器好了10倍

循环和模板

WordPress循环是所有WordPress主题开发的中心。在Liquid中,我们使用a循环循环遍历一组产品、收藏品或物品例如,循环遍历一个产品列表可能像这样:

{%表示集合中的产品。产品%}{{产品。Title}} {% endfor %}

专业技巧
要检查您在什么主题模板上-只需将此代码片段添加到顶部theme.liquid,然后在您的商店中导航到您想要的页面。它将始终输出用于将页面内容呈现为文本的模板。

{{模板}}

你可能还喜欢:如何在Shopify主题开发中使用替代模板。

资源

唷!这是关于Shopify主题的大量信息!如果您想了解更多信息,我在下面提供了关于主题的额外资源。

一定要报名参加免费合作伙伴帐户,开始本地开发和LOB欧宝娱乐APPiquid!

本地开发和入门主题OB欧宝娱乐APP 学习液体 所有的东西

我可以在本文中介绍更多的主题相似之处,但我所包含的对于任何希望构建第一个Shopify主题的主题开发人员来说都是一个很好的开始。OB欧宝娱乐APP

你是一个WordPress开发人员进入Shopify吗?你想了解更多关于什么?请在下面的评论中告诉我们!

主题:

借助Shopify合作伙伴计划发展您的业务

了解更多