WordPress. 如何创建一个基于樱桃框架3的孩子主题.x

General information

Firstly, you need to download Cherry Framework and the child theme draft to your desktop:

1. CherryFramework
2. cherry-theme

Then, you should install Cherry Framework and the child theme draft, whereupon activate the child theme draft. That is the one we will work with.

您将看到安装所需插件的消息(Contact Form 7 and Motopress Content Editor) when the child theme activation is completed. 如果不需要，可以继续安装或隐藏消息.

现在您可以使用和编辑主题了.

Let’s try to make our draft look like the following:

在编辑之前，让我们先看看我们的主题是由什么组成的. So, our child theme 具有以下标准的文件和文件夹结构:

Less 在CherryFramework和CherryFramework中使用前端处理器更方便地处理css样式 child theme. 这就是为什么需要编辑样式的原因 .less files, the framework will compile them to CSS. If you do not want to use LESS 但是编辑CSS，然后只更改样式.css文件，因为其他css文件的 child theme are generated from .less 每次更新樱桃选项时都会更新文件和, 这就是为什么您的更改将会丢失.

• CherryTheme
• bootstrap
• less – contains .less files connected with the bootstrap framework styles.
• css -包括自动生成的CSS bootstrap.
• images – contains service images and icons.
• includes
• plugins -包含必需和可选的主题插件.
• custom-function.php -你可以添加自定义函数的文件 child theme.
• custom-js.php -所有主题js文件初始化的文件, 您可以通过将它们添加到cherry_child_custom_scripts()中来连接必要的js文件。 function with the help of wp_enqueue_script.
• register-plugins.php -定义必需和可选主题插件的文件.
• sidebar-init.php -文件的一个注册侧边栏为 child theme. 通过在cherry_widgets_init()中声明侧边栏，可以在此文件中注册侧边栏。 function with the help of register_sidebar().
• theme-init.php 的主设置文件 child theme are defined. In particular, 其中一个定义了默认缩略图和特色图像的大小, 注册自定义菜单和自定义帖子类型和分类法的位置.
• js – contains the required js files.
• languages – includes localization files.
• favicon.ico – the default browser tab icon.
• main-style.css - CSS文件与主题样式. 它是从样式自动生成的.less，这就是为什么你不能在这里做更改.
• options.php – the file with the default theme 设置，除此之外，您可以在这里添加新选项.
• rtl.css -具有从右到左语言样式的文件.
• style.css – the main css file. 这是主题的正确工作所必需的，您也可以在这里添加自定义css样式.
• style.less – the .less file with the theme CSS styles.

Theme construction

1. Getting ready

   1. 首先，让我们创建静态主页和博客页面 Pages->Add new. 选择Home Page作为主页模板.

   2. After that go to Settings->Reading and set Front page displays option to Static page 并选择新创建的页面 Front Page and Posts Page options.

   3. Navigate to Settings->Permalinks 菜单并定义永久链接的设置. 例如，选择“Post name”并保存更改.

   4. Go to Appearance->Menus and create a new menu. Select “Header Menu” in “Theme locations”，添加所需页面并保存更改.

      在这些步骤之后，我们应该得到这样的结果:

      

2. Slider settings

   1. At first you need to define what slider 您想要使用的尺寸并设置它们 theme-init.php file. For example, we use 1170*720. Open theme-init.php file and find the following line:

      add_image_size( 'slider-post-thumbnail', 940, 446, true ); // Slider Thumbnail

      edit the corresponding values, i.e. we get in our case:

      add_image_size( 'slider-post-thumbnail', 1170, 720, true ); // Slider Thumbnail

   2. 现在我们需要更改的一些设置 slider initializing. Open custom-function.php 文件，并在结束前将以下代码添加到末尾 ?> tag:

      							Add_filter ('cherry_slider_params'， 'my_rewrite_slider_params');
      							my_rewrite_slider_params($params) {
      									$params['height'] = "'61.5%'";
      									$params['minHeight'] = "'200px'";
      									return $params;
      							}	
      						

      61.5% 数字是将幻灯片的高度除以宽度并乘以100%的结果. 在不同屏幕分辨率下更改正确的幻灯片需要此选项. 200px 你能减到的最小高度是多少 slider.

   3. Your slider is ready to work, let’s add slides. 您可以按照以下步骤进行操作 guide. 结果，您应该得到如下内容:

      

      If you uploaded slider images before setting dimensions in theme-init.php 文件，您的图像将没有所需的大小，以纠正，您可以使用 Regenerate Thumbnails plug-in or just re-upload slider images.

3. General styles

   1. Let’s upload our logo at first. Go to Cherry Options->Logo & Favicon 在管理面板中上传 logo image or choose “Text Logo选项，并根据相应的设置定义样式.

   2. Open General tab and define background-color for body and header -在我们的例子中是白色的，你也可以设置链接的颜色，主题标题的样式等.

      

4. Header styles

   1. 定义一般样式，移除底部边框，设置所需缩进，添加 logo 如第一张图片所示. 如上所述，建议将所有CSS样式添加到 style.less 在这里，它们将被自动编译为主CSS文件(main-style . js).css). 如果需要，您可以找到管理的详细信息 less here.

   2. Re-write the necessary templates. 默认情况下，所有模板文件都位于 framework，但如果需要更改元素的位置或顺序，则修改 HTML layout 对于某些页面部分，您需要编辑一些模板文件. 要做到这一点，您需要将必要的文件从 framework to the child theme，保留文件夹结构，并按您需要的方式进行更改 child theme 文件夹中的文件(您不应该编辑 framework，因为所有更改后都会丢失 framework update).

      让我们考虑一个例子:假设我们想要合并菜单和 logo 在一行中，找到它们上方的搜索表单. We need to edit wrapper-header.php 的“wrapper”文件夹中的模板文件 framework. We created the same “wrapper” folder in our child theme and copied wrapper-header.php file there. All files in the child theme 具有较高的优先级，它们将用于在页面上显示元素. 我们需要以我们需要的方式修改代码:组合 logo 和菜单在一行中，并在它们上方定位搜索. 因此，该文件中的代码看起来如下所示:

      Save changes and check the result. 当前面的步骤完成后，您应该得到如下所示的结果:

      

   3. 让我们给剩下的元素设置样式——菜单、搜索表单等. 如果您遵循了建议并选择了 .less file for editing, 这将使您的工作更容易，并节省这一步的时间, 因为在一个地方改变了变量 .less，我们可以在使用这个变量的所有元素中更改样式. All variables are located in bootstrap/less/variables.less file. 打开该文件后，您将看到变量部分被注释掉了. 这些变量可用于定义样式，但它们的值不在 variables.less 文件，但在管理面板中的主题选项. I.e., if you use @linkColor 变量时，其值将从 Link Color 在主题选项中，在我们的例子中是#e46568. 同样的方法，你可以使用以下变量:

      						@textColor,
      						@linkColorHover,
      						@bodyBackground,
      						@baseFontSize,
      						@baseFontFamily,
      						@baseLineHeight
      						

      中可以直接更改(定义)其他变量 variables.less file, for instance, we have flat design and do not want rounded corners, 这就是为什么@baseBorderRadius的值, @borderRadiusLarge, @ borderradiussmall尺寸我们改为0, etc.

      我们将根据此添加菜单项编号 article principles.

   4. Hide the search form in the options. 你可以提出一个问题——如果我们隐藏它，为什么我们要给它添加样式呢? 控件中添加搜索表单 header 在将来，在选项中激活它就足够了，而不是浪费时间来定位和修改相应的CSS样式.

   5. You can find Use stickUp menu 在主题选项(樱桃选项)中的选项 Navigation tab -允许激活固定菜单，保持在屏幕的顶部，而滚动, like “sticking up” to it. 但最好是“粘”在屏幕的顶部，而不是菜单，而是完整的 header as well. Let’s edit our theme. Open custom-function.php 文件，并在结束前将以下代码添加到末尾 ?> tag:

      You can find Use stickUp menu 在主题选项(樱桃选项)中的选项 Navigation tab -允许激活固定菜单，保持在屏幕的顶部，而滚动, like “sticking up” to it. 但最好是“粘”在屏幕的顶部，而不是菜单，而是完整的 header as well. Let’s edit our theme. Open custom-function.php 文件，并在结束前将以下代码添加到末尾 ?> tag:

      						Add_filter ('cherry_stickmenu_selector'， 'my_change_selector');
      						my_change_selector($selector) {
      								$selector = '.header';
      								return $selector;
      						}
      						

      这段代码改变了元素在屏幕顶部的“竖起”效果. 您可以为任何替换的元素配置它 .header with the required CSS selector. 然后将以下代码添加到主题css样式中:

      						.header.isStuck {
      							right: 0;
      							left: 0;
      							box-shadow: 0 5px 10px rgba(0,0,0,.1);
      						}
      						

      You finished the header stylization. 因此，您应该得到以下结果:

      

5. Adding and styling content

   1. Firstly, let’s go back to the slider，添加一些文本横幅和样式 navigation elements.

   2. 继续用内容和样式填充主页. 中创建所有的页面内容 editor 借助标准元素和 framework shortcodes.

      让我们来分析一下标题——它们在我们的第一张图片中有特定的样式——大的缩进和边框. 这里我们有一个选择——要么为所有人设置相同的样式 default theme headings or to use Title shortcode, available in CherryFramework.

      第一种方式不是很方便, 因为有很多插件和主题元素, located outside the content, 使用不同的标题 HTML-layout，它将继承我们新添加的样式. 在某些情况下，这可能会导致意想不到的和不愉快的结果, 因此，您将需要浪费额外的时间来固定所需标题的样式. To avoid that, we will use Title shortcode，因此只有其中的标题 shortcode will get the required styles. 内容结构如下:

      							[row]
      							[span4]
      							[title_box title="Lingerie"]
      							
      							
      							[spacer]
      							[/span4]
      							[span4]
      							[title_box title="News"]
      							
      							
      							[spacer]
      							[/span4]
      							[span4]
      							[title_box title="Fashion Trends"]
      							
      							
      							[spacer]
      							[/span4]
      							[/row]
      							[row]
      							[span6]
      							[spacer]
      							[title_box title="welcome"]
      							Mauris fermeum dictum magna. Sed loreet aliquam leote llus dolor dapibus eget elementum vel curs eleifend elit. Aenean aucto. wisi et urna. Aliqat volutpat.
      							Duisac turpis. Integer rutrum ante eu lacuestibulum libero nisl porta vel scelerisque eget malesuada at nequeVivamus eget nibh. Etiamursus leo vel metus. 
      							Nulla facilisi. Aenean nec eros. Vestibulum ante ipsu. m primis in faucibus orci luctus et trices posuere cubilia Suspendisse sollici udin velit sed leo. 
      							Ut pharetra au.
      							[button text="read more" link="#" style="primary" size="normal" target="_self" display="inline" icon="no"]
      							[/span6]
      							[span6]
      							[spacer]
      							[title_box title="why us"]
      							Mauris fermeum dictum magna. Sed loreet aliquam leote llus dolor dapibus eget elementum vel curs eleifend elit. Aenean aucto. wisi et urna. Aliqat volutpat.
      							Duisac turpis. Integer rutrum ante eu lacuestibulum libero nisl porta vel scelerisque eget malesuada at nequeVivamus eget nibh. Etiamursus leo vel metus. 
      							Nulla facilisi. Aenean nec eros. Vestibulum ante ipsu. m primis in faucibus orci luctus et trices posuere cubilia Suspendisse sollici udin velit sed leo. 
      							Ut pharetra au.
      							[button text="read more" link="#" style="primary" size="normal" target="_self" display="inline" icon="no"]
      							[/span6]
      							[/row]
      							

      你可以找到关于的详细信息 Cherry framework 以下教程中的短代码: WordPress. 如何使用短代码(基于Cherry).

      在对所需元素进行样式化之后，我们的主题看起来如下所示:

      

6. Footer styling

   1. Edit the general footer styles – borders, indents, background, etc.

   2. Add and stylize the widgets. By default, you can use 4 footer widget areas in Cherry framework，它们被分成相等的列. 这种结构在我们的案例中是可以接受的. 要更改它，我们将编辑2个文件:

      • includes/sidebar-init.php file in the child theme. You should register all widget areas for our theme. 在这里，我们可以添加新的，删除或修改现有的 widget areas with the help of register_sidebar(), unregister_sidebar() functions.

      • wrapper/wrapper-footer.php file in CherryFramework folder. You need to copy that to “wrapper” folder in the child theme. Footer widget 区域是在此文件中定义的，您可以在这里更改现有的 HTML layout, widget areas location, add your widget area with the help of dynamic_sidebar function.

   3. 在主题选项(Cherry options)中定义所需的版权文本 Footer tab in Footer copyright text option.

The main work is finished. Now you need to look through the website，调整你不喜欢的样式，但总的来说，主题是可以使用的.

Additional information. You can find the detailed framework documentation on the official Cherry Framework website.

Below you can see the list of Bootstrap framework .less 管理主题样式时可能需要的文件:

• variables.less – contains all .less variables. 您可以在这个文件中看到已经声明了哪些变量, change their values, add your own variables.
• buttons.less – the default buttons styles.
• forms.less – the default form elements styles.
• mixins.less – the default mixins.