Divi WordPress Theme
尼克·道格蒂

该来宾帖子是由撰写的 尼克·道格蒂 的Skyrocket网站拥有令人印象深刻的客户群以及广泛的WooThemes修改。

为了配合Canvas v4的发布,WooThemes的家伙要求我为我最近基于Canvas的一些项目写一个案例研究,我非常激动。

我叫尼克,是美国加利福尼亚州洛杉矶市的一名专职网页设计师。 自从他们在WordPress的黑暗年代(确切地说是2008年)首次发布Vibrant CMS主题以来,我就一直是WooThemes的用户(也是粉丝)。

这篇文章是关于TheButterflyCircus.com的,这是迄今为止我最雄心勃勃的Child Theme修改。

因此,系好安全带,拿起铅笔,戴上您的思想帽。 它可能会变得讨厌。

接听电话

蝴蝶马戏团网站

蝴蝶马戏团是一部屡获殊荣的短片,目前已在全球超过1000万人上映。 这是一个鼓舞人心,令人振奋的信息,内容是关于一个没有手臂或双腿的人,在最不可能发生的狂欢节杂耍中找到自己生活中的目的和意义。

去年年底,这部电影的创作者急忙打电话给我,因为这部电影已经发行并且他们的网站还没有准备好。 他们需要帮助。 快速地。

他们告诉我,我们想用WordPress构建它。 但是我们不确定WordPress是否可以做我们想要做的事情。 现在我们被困住了。

求爱还是不求爱

我一直在挑战,这听起来不错。 所以我跳上车,开车去洛杉矶的办公室,看看我是否可以帮忙一点。

他们对网站有一个非常具体的设计概念,并希望确保该网站在该时间段内看起来是真实的。 (想想1930年的大萧条时代)。

另一位设计师实际上已经为他们启动了该项目,并为此付出了巨大的代价,试图从头开始创建自己的自定义WordPress主题,然后感到沮丧并放弃。

作为新的首席设计师,我的第一个决定是是尝试继续使用现有代码,还是在我已经知道(并信任)的WordPress主题框架内重建所有内容。

帆布儿童主题

我选择使用Canvas主题,并立即创建了一个子主题(使用Magnus的教程)来容纳所需的主要样式/布局自定义。 然后,我一步一步地从网站中提取图形元素,有条不紊地调整CSS和javascript,直到看起来正确为止。

如下所示,“画布”主题看起来与“蝴蝶马戏团”子主题的最终结果有很大不同。 这些更改是覆盖CSS中默认的Canvas元素样式,添加一些自定义主题选项,动画首页和一些自定义页面模板的组合。

蝴蝶马戏团,基于画布主题。

华丽的画框,马戏团导航和其他装饰元素

开发该网站的最大挑战是找到创造性的方式来仅使用CSS来操纵设计。 为了简单起见,如果不需要,我不想在Canvas主题的默认模板中更改HTML或PHP代码。

通过将徽标放在页眉背景图像中来完成马戏团导航? 框(在标题样式下)而不是自定义徽标??? 框(在“常规设置”下)在“画布主题选项”中。

导航菜单。

接下来,我创建了一个自定义菜单(在“外观>>菜单”下),并获取了每个列表项的ID(使用Firebug)。 这使我可以为导航中的每个项目添加CSS位置和背景图像元素,并最终拆分? 导航在中心。

样式化导航菜单

扩展华丽框架是该设计的核心,因为它框架了网站的所有内容。 这很棘手,因为它需要将框架分为三个部分:

  • 顶部-框架的顶部挂接到页面的#main元素,并使用z-index调用将其保持在顶部。
  • 中间-这是不断扩大的?? 部分。 这是重复的,半透明的黑色背景,与页面的#content元素挂钩。
  • 底部–这是唯一的部分

    我必须在页面上添加一个新的HTML元素。 框架底部没有可行的CSS挂钩,所以我做了自己的

    并使用我的functions.php文件中的woo_footer_top操作钩子将其钩住。 最后,我添加了CSS来调用背景图片,并使用z-index调用对其进行了适当的分层。

不使用Flash的华丽主页

事实证明,您实际上并不需要Flash为主页制作一些很酷的简介动画。 简单的jQuery动画完全有可能。

如果您曾经在PowerPoint中制作幻灯片动画,请不要惊慌,这确实很相似。 诀窍是倒退。

这是我做的

  • 我创建了一个名为template-animation.php的自定义页面模板,并将每个HTML元素(主要是图像)添加到了模板中。
  • 我绝对使用CSS定位每个图像,以将它们放置到位。
  • 完成后,我转向为每个元素设置动画以使其淡入?? 或滑入。
  • 我使用一个小jQuery(在一个名为homepage-animation.js的文件中)将动画分为从页面加载开始的5个阶段。 我用来使每个元素淡入的语法如下所示:jQuery(’#blueButterfly’)。show()。css({opacity:0})。animate({opacity:1},1200);
  • 最后,我在functions.php文件中添加了wp_enqueue_script调用,以在首页上调用自定义动画javascript。

看起来很酷吧? 当您将它们放在一起时,就可以带来引人注目的用户体验。

该主题的其他显着增加/更改是:

  • 从Object主题借来的Cast页面的照片滚动器
  • 在整个Google字体替换中,我们选择了Josefin Sans ?? 因为它提供了当时最真实的外观
  • 蝴蝶马戏团短片的新自定义页面模板
  • 自定义帖子更多?? 每个帖子下方的部分,进行了修改以显示Facebook / Twitter按钮(当然使用内置的Woo简码)。
  • 用于电子邮件注册的自定义页脚小部件,与网站的外观/风格相匹配。

更多技术补充:自定义背景

客户的最初要求之一是为网站上的每个页面都提供自定义背景图片。 这似乎是一个练习通过子主题定制主题选项的好机会。

在尝试了几个选项之后,我最终在WP页面编辑器中创建了一个自定义metabox,如下所示:

在页面编辑器中创建自定义元框

最后,我在子主题的functions.php文件中编写了一个小函数,以将其钩入woo_head操作钩,类似于自定义CSS的方式? 画布主题选项内的文本框有效。 (它将动态地将自定义CSS放入主题的header.php文件的部分中。)

如果您有兴趣,可以在Mark的教程中找到更多有关使用钩子和过滤器的信息。

电子商务设施

该网站的另一个主要部分是有一个在线商店,电影制片人可以在其中将DVD的副本直接出售给影迷。

作为WPMU DEV的追随者,我决定使用他们的新电子商务插件MarketPress。 我喜欢它,因为它使用了WordPress 3中的内置自定义帖子类型功能。不再需要一堆凌乱的MYSQL表,从而使数据库变得混乱。 另外,它可以与WP Multisite和BuddyPress一起使用,如果您对此有兴趣的话。

MarketPress允许我们在后端中创建内部和外部(或关联公司)产品,然后通过在WordPress页面中添加简单的短代码来快速设置整个商店,包括购物车和自定义优惠券。

MarketPress插件中的示例产品清单

现在,电影制片人可以将DVD直接卖给粉丝,也可以通过iTunes出售其配乐,同时始终将用户保留在网站上,直到可以结帐为止(通过PayPal Express Payments)。

其他第三方插件

像许多其他WooFans一样,我也很喜欢Gravity Forms。 它使我可以立即创建具有多个路由选项的高级联系表单。 拖放界面非常直观,穴居人可以使用它。 此外,它与Mailchimp和Campaign Monitor集成得很好,可以进行电子邮件营销。

我们还在网站上使用这些插件:

  • Analytics360将Google Analytics(分析)和Mailchimp数据直接拉入WP仪表板
  • 排名跟踪器,向电影制片人显示他们在Google中为其网页排名的关键字和位置

结论

有几个人问我,为什么我要从一个已经完成一半的项目重新开始。

对我来说,调整网站的布局和图形元素所需的时间和精力比建立一个可靠,可扩展且易于客户使用的后端框架所需的时间和精力(以及核心编码知识)最少。使用。

WooThemes的代码以相对易于理解和修改的方式编写。 另外,他们已经通过支持主题后端的WooFramework进行了繁重的工作。

最后,Canvas给我的所有主题选项,代码钩子和其他优点(如短代码)都使得在短短一周内交付一个外观精美的网站变得轻而易举。

有时候事情变得有些书呆子,但是有了WooThemes,您实际上不必成为HTML,CSS,PHP或Javascript的专家就可以提供出色的结果。 但是,我确实建议您学习足够多的知识,以使用每种语言(按此顺序)是危险的。

我认为最好的方法是从Canvas这样的主题开始并进行试验。 通过玩代码使您的手变得肮脏,让您的想像力发狂。

随意浏览站点并观看电影。 请在下面发布您可能有的任何问题,我会尽力回答。 并且,如果您想支持电影制作人,请考虑同时获取《蝴蝶马戏团》 DVD的副本。

Nick Daugherty是Skyrocket网站的首席执行官和联合创始人,该网站是美国加利福尼亚州洛杉矶的一家数字设计/营销公司。 偶尔,他会离开Mac,您可能会发现Nick在当地的咖啡店弹吉他或在附近的道场(Dojo)练习武术。

cta-banner-10-product-page-v2_2x

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=