创造一个创世纪儿童主题

创造一个创世纪儿童主题
创造一个创世纪儿童主题

如果要自定义现有的亚博yabo88app 下载WordPress主题,尤其是像这样的主题框架起源,建议的方法是使用子主题。子主题是存储所有特定自定义的单独主题。这样,如果父主题被更新,你不会失去所有的努力。

儿童主题还有两个好处。第一,您的主题中只包含您的特定自定义设置。它让你很容易看到你在一个项目上做了什么,找出问题所在。你不必为了找出问题所在而去挖掘(并找出)大量没有编写的代码。

第二,如果你总是像我一样使用相同的父主题,您为一个项目开发的所有代码在所有未来的项目上都是可重用的。当然,这取决于您使用的父主题是通过子主题定制的。这意味着它可以进行大量的操作和过滤,有两种钩子。

钩子:它们是什么?你为什么需要它们

钩子是一种工具,允许你在某个地方“钩住”主题。操作只允许您在某个地方执行代码。过滤器允许您修改主题正在使用的信息。这里有两个例子(在WordPress中,亚博yabo88app 下载因此,无论您使用的主题是什么,它们都可以工作:

WpHooter允许您在页面底部执行代码的操作。例如,如果你想在每个页面的底部添加谷歌分析代码,您可以将其放入functions.php文件中:

函数be_google_analytics()此处显示google analytics code add_action('wp_footer',‘成为谷歌分析’;

摘录长度是一个允许您修改在使用时显示多少文本的筛选器第二节()在你的主题中。默认情况下,它返回55个字。如果你想把它改成35个单词,您可以将其放入functions.php文件中:

函数是_excerpt_length($length)$length='35';返回$length;add_filter('excerpt_length',‘be摘录长度’;

如你所见,钩子和过滤器允许您在不编辑现有代码的情况下修改内容。你可以从你自己主题的安全性出发,您不必担心升级时丢失的更改。亚博体育下载

Genesis:我唯一需要的Word亚博yabo88app 下载Press主题框架

以下是我喜欢《创世纪》胜过所有其他主题的几个原因:

  • 一切都有挂钩。任何你想定制的东西,可以定制。我还没有找到一些我需要编辑的东西,这些东西不能用一个动作或过滤器轻松完成。
  • 用代码开发,不是选择。虽然Genesis有一个主题设置页面,您的大部分开发将使用代码进行。这意味着我不必担心客户端会打开一个开关并破坏站点。
  • 可理解的文件结构。想知道如何自定义标题中的内容吗?跳入genesis/lib/structure/header.php。自定义菜单类?看看genesis/lib/classes/menu.php。探索Genesis核心很容易找到你需要的所有钩子和过滤器。
  • 社区。还有很多其他伟大的Genesis开发人员正在共享代码和专业知识。studiopress监听用户并添加他们请求的功能。我甚至提交了很少有创世补丁已经成功了。
  • 商业。通过与创世纪的建筑工地,我的项目在studiopress.com上展示,这让我的交通和生意更加繁忙。我几乎所有的工作都来自studiopress.com。

还有一件事我想说,这就是放置代码的地方。任何与网站外观相关的东西都属于主题。任何核心功能都属于插件。这里有一个很好的经验法则:如果你的用户决定改变主题,他希望带到下一个主题的任何功能都应该在一个插件中。

把你经常使用的东西或者客户机可能想选择性地关闭成插件也是一个好主意。如果有一项功能你不想让它们关闭,你可以把它放在mu插件目录中,它代表必须使用,并且始终处于激活状态。

开始建立你的第一个孩子主题

以下是我构建子主题的典型工作流:

  1. 在我的网站上为此项目创建子目录
  2. 安装WordPr亚博yabo88app 下载ess和Genesis
  3. 将网站的所有功能构建为子主题
  4. 使用CSS使输出的标记与提供的设计匹配
  5. 发送给客户审查

本教程将只关注创建子主题的功能。我将使用我最近为公民广场工作的一个项目,这是一个创意网站机构,专门设计和维护加拿大的市政网站。这项工程是为巴恩韦尔村设计的。提供的PSD如下所示:

我们从以下几点开始:

我假设你用的是《创世纪》。您可以用任何主题构建子主题,但《创世纪》是我使用的,也是我写这篇教程的目的。我们也从一个空白的儿童主题开始。一旦你建立了一些,你会发现有一些代码你一直在使用,你可能会开发一个基础儿童主题来建立。这是我的.

创建子主题

进入/wp content/themes并创建一个目录。我要叫我的“巴恩韦尔”。您的孩子主题只需要两个文件样式表PHP.你可以为你的网站写一个全新的样式表,但我喜欢修改默认的Genesis One,这样我就不会忘记任何东西(分类标题,面包屑…)。

转到/wp content/themes/genesis/style.css并将其复制到/wp content/themes/barnwell/style.css。不要在CSS文件中使用@import来提取父主题,因为当父主题对样式表进行更改时,它将对布局产生不利影响。

在样式表的顶部,更改信息以描述主题。确保你包括模板:Genesis,这就是为什么这是一个儿童主题,而不是一个标准的主题。这是我的

/*主题名称:巴恩韦尔描述:创世纪的儿童主题,作者:Bill EricksonAuthor Uri:http://www.billerickson.nettemplate:Genesis*/*Genesis 1.7.1的样式表*/

这就是我们要处理的CSS文件,那么让我们转到functions.php

有几种方法可以构造此文件。重要的是在定制之前加载Genesis核心文件,因为你不能定制Genesis直到它被加载。如果你看看studiopress出售的儿童主题,它们都是通过在functions.php的顶部添加以下内容来实现的:

/**启动引擎*/需要\u一次(templatePath。'/lib/init.php');

虽然这很有效,我更喜欢创建一个子主题设置函数,将我的函数附加到适当的操作和过滤器中。然后在下面列出我的函数。

下面是我在functions.php文件顶部放置的内容:

            *@版权所有(c)2011,bill erickson*@license http://opensource.org/licenses/gpl-2.0.php gnu public license**/***theme setup**此设置函数将所有站点范围的函数*附加到正确的操作和筛选器。所有函数本身*都在这个设置函数的下面定义。**/添加“action”(“Genesis”(“Genesis”)“Setup”,“Child”(“Child”)“Theme”(“设置”),15);函数子级_theme_setup()

我还想为这个主题创建一个缩略图,以便于在主题列表中识别。只需制作一张300×225的图像,把它命名为screenshot.jpg,然后上传到/themes/barnwell目录。

现在转到外观>主题并激活您的孩子主题。您现在创建了一个儿童主题!

自定义子主题

你已经激活了你的孩子主题,但一切都没有改变。是时候给它添加代码了。我不会把我在这个主题上所做的一切都包括进去,但是我会在主页上介绍大部分的变化。我们要做的是:

本教程中未包含的一些内容:

更新主题设置

Genesis允许你从WordPress后端控制网站的许多功能,亚博yabo88app 下载不接触任何代码。在开始编码之前,我们需要在后端进行所有可能的更改。进入Genesis>主题设置。

首先转到标题设置并选择“图像徽标”。这将添加一个body类头部图像,它在CSS中用于将网站标题和说明替换为图像。因为我们还没有上传标志,标题和描述会消失。

然后转到导航设置并取消选中“主导航”。我们将在下一节中构建自己的特殊导航。

以下是网站现在的外观:

创建菜单

如果你仔细看第一页的截图,你会注意到标题左边有标志,然后是主菜单,然后是右边的二级菜单。我进入“外观>菜单”,创建了两个菜单(主菜单和次菜单)。然后用正确的链接填充它们。现在我将创建一个函数,将这些菜单粘贴到标题中。

这是functions.php(上面没有所有注释):

添加“行动”(“创世”设置、“儿童”主题设置,15);函数child_theme_setup()//将nav添加到headerAdd_action(“genesis_header”,'be撘nav_menus');/***添加导航菜单到标题**/函数be撘nav_menus()echo'
            
            “;”

网站现在应该是这样的。我们将使用CSS(不是教程的一部分)来区分菜单。

在结束本节之前,我还有一件事要做。既然我们用自己的菜单,不是创世记中的,我将删除“主题设置”页上的配置框,这样最终用户就不会意外打开其中一个菜单。以下是更新后的函数.php:

添加“行动”(“创世”设置、“儿童”主题设置,15);function child_theme_setup()//**backend**//删除元数据库sadd_action(“Genesis_theme_settings_metaboxes”,'be撏remove_metaboxes');/**frontend**//将nav添加到headerAdd_action('genesis_header','be撘nav_menus');/***删除元数据库*这将从Genesis>主题设置中删除未使用或不需要的元数据库。请参阅/genesis/lib/admin/theme-settings.php了解所有元数据库。**/函数be_remove_metaboxes($_genesis_theme_settings_pagehook)remove_meta_box(“genesis theme settings nav”,$创世纪主题设置页面挂钩,'main');/***将导航菜单添加到标题**/函数be_nav_menus()echo'
            
            “;”

设置主页内容区域

因为主页是静态的,不是一个帖子列表,我要做的第一件事就是创建一个名为home的页面,然后转到设置>阅读并将主页设置为“主页”。

对于所有特定于主页的代码,我把它放进档案里了首页.php.所以我要做的第一件事是创建front-page.php:

            *@版权所有(c)2011,bill erickson*@license http://opensource.org/licenses/gpl-2.0.php gnu公共许可证**/genesis();?>

把这个文件想象成只适用于首页的functions.php。我们所有的定制都必须在创世记(.

接下来,我将强制页面布局为全宽,删除页面标题,然后添加旋转器(构建这个可以是一个完整的教程,所以我不考虑它):

//force full widthadd_filter(“Genesis_pre_get_option_site_layout”,'uuGenesis_return_full_width_content');//删除页面标题删除操作(“Genesis_post_title”,'Genesis_do_post_title');//添加rotatoradd_action('Genesis_after_header','Be撊home撊rotator');/***rotator**/函数Be撊home撊rotator()Do撊action('home撊rotator');

现在我来构建内容区。首先我移除默认循环,创世记循环,把它换成我自己的,BeHiang-LyLoopy().在我的循环里我有三个分区,#剩余内容,#内容居中,正确的内容。在左侧,我将输出页面内容(客户机可以从页面>主页编辑此内容)。在中间,我展示了最新的帖子。在右边的分区中,我显示了客户机可以编辑的侧边栏(主侧边栏)。然后列出即将发生的事件和链接。

我不会更详细地介绍实际的代码,因为这更像是一个过程教程。更重要的是,您看到了如何创建自定义的家庭内容区域,而不是了解像我即将到来的事件查询这样的细节。

以下是总的首页.php:

            *@版权所有(c)2011,bill erickson*@license http://opensource.org/licenses/gpl-2.0.php gnu public license**///force full widthadd_filter('genesis_pre_get_option_site_layout','uuGenesis_return_full_width_content');//删除页面标题删除操作(“Genesis_post_title”,'Genesis_do_post_title');//添加rotatoradd_action('Genesis_after_header','Be撊home_rotator');/***rotator**/函数Be撊home_rotator()Do_action('home_rotator');//内容区域Remove_action('genesis_loop','Genesis_do_loop');添加_action('Genesis_loop','be摼home_loop');/***主页内容区**/函数be摼home_loop()echo'
            
';while(have_posts()):the_post();_content();endwhile;echo'
“回声”
“回声”

最新消息

';$news=new wp_query('posts_per_page=3');而($news->have_posts()):$news->the_post();全球$post;echo'
“回声” “回声”
'.GETHythyDATE()。' '.获取\标题()。'
“回声”
最后;wp_reset_query();echo'
“回声”
';动态_边栏(“主边栏”);?>

事件

热门链接

'event'、'posts-per-page'=>'5'、'orderby'=>'asc'、'order'=>'meta-value-num'、'meta-query'=>array(array('key'=>'be-events-manager\u end-date'、'value'=>time()、'compare'=>'>');$events=new wp\u query($args);if($events->have-posts()):echo'
    ';while($events->have_posts()):$events->the_post();echo'
  • '.获取\标题()。'
  • 最后;wp_reset_query();echo'
?>
    -1,'title砗li'=>'','category'=>2,'category'=>0);wp砗list砗书签($args);是吗?>

我还不得不修改子主题设置()函数在functions.php中注册新的侧边栏。

添加“行动”(“创世”设置、“儿童”主题设置,15);function child_theme_setup()//**backend**//删除元数据库sadd_action(“Genesis_theme_settings_metaboxes”,'be_remove_metaboxes');//添加主侧边栏_register_sidebar(array('name'=>'home sidebar','id'=>'home sidebar'));/**frontend**//add nav to headerAdd_action('genesis_header','be撘nav撘menus');

以下是将内容添加到“主页”页面后网站的外观,添加一些事件(使用此插件)并向主侧边栏添加一个小部件。

最后,自定义的最后一部分。因为页脚是站点范围的,我们将在functions.php中进行这些定制。页脚区域由三个部分组成:搜索,页脚小部件和页脚。

要添加搜索,把它放在functions.php的底部:

/***将搜索添加到页脚**/函数be_search()?>
            
	
            

接下来,我们将把它添加到child_theme_setup()函数中,告诉wordpress将搜索函数放在哪里:亚博yabo88app 下载

//将搜索添加到footerad_操作(“genesis_before_footer”,“BeaQuest'”4);

效果很好,除了搜索文本说“搜索这个网站…”和按钮说“搜索”。在设计中,搜索文本为空,按钮为“Go”。幸运的是,Genesis为我们提供了过滤器。我们用手边的_返回“假”()wordpress在搜索文本亚博yabo88app 下载上的函数,并为按钮创建自己的函数。

在functions.php的底部放置:

/***将搜索按钮文本更改为转到**/函数为“搜索”按钮“文本($text)返回Esc属性(“转到”);

并将child_theme_setup()的add search to footer部分修改为:

//将搜索添加到footerad_操作(“genesis_before_footer”,“BeaQuest'”4);添加“过滤器”(“Genesis”搜索“文本”,'uuu return_false');添加_filter('genesis_search_button_text','be_search_button_text');

现在让我们添加页脚小部件。这是创世纪的一个内在特征,所以它只需要在child_theme_setup()中使用一行代码:

添加主题支持(“Genesis页脚小部件”,6);

现在,您将有6个新的小部件区域可在“外观>小部件”中访问。我现在要让它们空着,这样屏幕截图中就不会有文本了。如果你深入到创世纪核心,你会看到它在页脚之前将页脚小部件添加到Genesis。附加到操作或筛选器时,默认优先级为10。为了确保在页脚小部件之前显示搜索,我将搜索的优先级设置为4(参见上面的代码)。

最后,我将删除默认的Genesis页脚,并将其替换为我自己的页脚。把它放在functions.php的底部:

/***页脚**/函数be_footer()echo'
             

版权所有。日期(y)。':保留所有权利

“回声”
';wp_nav_menu(array('menu'=>'footer');echo'
“;”

在您的孩子的主题设置()函数中:

//footerremove_action(“Genesis_footer”,'Genesis_do_footer');添加_action('Genesis_footer','成为页脚');

我正在使用页脚右侧的自定义菜单,因此,转到“外观>菜单”并创建一个名为“页脚”的菜单。

这就是这个网站的样子。

看起来不太像,但是,通过一些CSS调整,您可以使其看起来像这样:

下面是functions.php文件:

             *@版权所有(c)2011,bill erickson*@license http://opensource.org/licenses/gpl-2.0.php gnu public license**/***theme setup**此设置函数将所有站点范围的函数*附加到正确的操作和筛选器。所有函数本身*都在这个设置函数的下面定义。**/添加“action”(“Genesis”(“Genesis”)“Setup”,“Child”(“Child”)“Theme”(“设置”),15);function child_theme_setup()//**backend**//删除元数据库sadd_action(“Genesis_theme_settings_metaboxes”,'be_remove_metaboxes');//添加主侧边栏_register_sidebar(array('name'=>'home sidebar','id'=>'home sidebar');//添加页脚小部件添加主题\支持('genesis footer widgets',6);/**frontend**//将nav添加到headerAdd_action(“Genesis_header”,'be撘v撘menus');//将搜索添加到footerad撘action('Genesis撘u before撘footer',“BeaQuest'”4);添加“过滤器”(“Genesis”搜索“文本”,'uuu return_false');添加_filter('genesis_search_button_text','be撘search_button_text');//footerremove_action('genesis_footer','Genesis_do_footer');添加_action('Genesis_footer','be摼footer');/***删除元数据库*这将从Genesis>主题设置中删除未使用或不需要的元数据库。请参阅/genesis/lib/admin/theme-settings.php了解所有元数据库。**/函数be_remove_metaboxes($_genesis_theme_settings_pagehook)remove_meta_box(“genesis theme settings nav”,$创世纪主题设置页面挂钩,'main');/***将导航菜单添加到标题**/函数be_nav_menus()echo'
             
             ';/***将搜索添加到页脚**/函数be_search()?>
             
	
             

版权所有。日期(y)。':保留所有权利

“回声”
';wp_nav_menu(array('menu'=>'footer');echo'
“;”
比尔·埃里克森是亚博yabo88app 下载WordPress顾问谁使用WordPress作为CMS和Genesis框架构建定制网站亚博yabo88app 下载?他通过亚博yabo88app 下载主题,插件,教程,和核心补丁.