[fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”” class=”” id=””][alert type=”notice” accent_color=”” background_color=”” border_size=”1px” icon=”” box_shadow=”yes” animation_type=”0″ animation_direction=”left” animation_speed=”1″ class=”” id=””] 注意:这是一份外语文档,左侧为原文,右侧为机器翻译;仅供中文用户辅助使用,不定时人工修订。 [/alert][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”” class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Hueman

Thank you for using this theme, you have good taste! 😉

AlxMedia · Themes

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Hueman 中文版

感谢您使用此主题,品位不错哦! 😉

薇晓朵 · 主题

[/one_half][/fullwidth][fullwidth background_color=”#ffffff” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”yes” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s1″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Getting started

Looks like you’ve found the documentation for the theme, we’re off to a good start! On the right side you can see the table of contents of this documentation.

Jump to the section you want, or read it all through – your choice.

Let’s move on!

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

入门

看起来你已经找到了为主题的文档,我们有了一个良好的开端!在右边,你可以看到这个文件的目录。

跳转到你想要的部分,或者通过阅读这一切 – 你的选择。

让我们继续!

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s2″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Installation

Installing your theme is pretty easy! After downloading you should have a hueman.zip file. This is a compressed file containing all of the required templates and images required for the theme to function properly.

Upload the theme

  1. Go to Appearance > Themes in the WordPress menu
  2. Click on the Add New button
  3. Click on the Upload link
  4. Select the hueman.zip file
  5. Click Install Now

Activate the theme

  1. Go to Appearance > Themes in the WordPress menu
  2. Hover over the theme thumbnail and press the Activate button
Additional information: WordPress Codex – Using Themes
[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

安装

安装你的主题是非常容易的!下载完毕后,你应该有一个 hueman.zip 文件。这是一个包含所有为主题正常运行所需的所需的模板和图像的压缩文件。

上传主题

  1. 转到外观> 主题在 WordPress 的菜单
  2. 点击添加新按钮
  3. 点击上链接
  4. 选择 hueman.zip 文件
  5. 点击立即安装

激活主题

  1. 转到外观> 主题在 WordPress 的菜单
  2. 将鼠标悬停在主题缩略图,并按下启动按钮
Additional information: WordPress Codex – Using Themes
[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s3″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Adapting existing content

If you are changing theme from another one and have plenty of existing content, menus and widgets on the website already, you need to do the following after having activated the new theme:

  1. Go to Appearance > Menus and add the menu areas back to where you want them. The menus will be hidden until you add links to them. This way you can choose how many menu areas to show on the website.
  2. Go to Appearance > Widgets and add the widgets back to your sidebars, or use some of the new custom widgets.
  3. Install the Regenerate Thumbnails plugin and activate it. Then go to Tools > Regenerate Thumbnails and run it once. This will crop existing thumbnails to the new sizes used in this theme.
  4. If you have not used the Featured Image feature in your other theme, you can use the Easy Add Thumbnail plugin to automatically set featured images for old articles.
[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

适应现有的内容

如果您是从另外一个变化的主题,并有大量的现有网站上的内容,菜单和窗口小部件已经是,你需要做的已经启动了新的主题后,以下内容:

  1. 转到外观> 菜单菜单添加到区域返回到您想要的地方。该菜单将被隐藏,直到您添加它们的链接。这样,您就可以选择多少菜单区域显示在网站上。
  2. 转到外观> 窗口小部件,并添加小部件回你的侧边栏,或者使用一些新的自定义窗口小部件。
  3. 安装重新生成缩略图插件并激活它。然后去工具> 重新生成缩略图并运行它一次。这将裁剪现有的缩略图,在这个主题中使用的新的大小。
  4. 如果你还没有使用特色图片功能,在您的其他主题,您可以使用易于添加缩略图插件,自动设置功能的图像旧文章。
[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s4″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Importing demo content

Note: For server bandwidth reasons, I can not supply the demo site data for this theme, although I want to. However you can download the WordPress sample theme test data XML from here.

This step is optional and for new WordPress sites without any content. If you don’t want to import any extra pages and sample data to your site, you can skip to the next section. If you want a base similar to the demo site to work on and edit, then this is for you.

Important: If your site is not a fresh install with no content, but has existing content and pages on it already, it is important to remember that this file will add a lot of pages, posts, categories and tags (and media if you choose to import that) to your site, that you will have to edit or remove after importing.

Importing

  1. Go to Tools > Import in the WordPress menu
  2. Click on the WordPress link
  3. Install the plugin it asks for and activate, if you haven’t already installed it.
  4. Now you should see a select file button on the Tools > Import > WordPress page.
  5. Upload the .XML data file. Choose if you want to import media or not (images).
  6. Wait for the import process to finish. When it’s finished it will say so.
  7. Go to Appearance > Menus and add the menu areas to for example header.
  8. Go to Appearance > Widgets and add some widgets to your sidebars.

Your page should now look similar to the demo page. Refer to the Frontpage guide if you want to use a static page / non-blog home page.

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

导入演示内容

注:对于服务器带宽的原因,我不能提供演示网站数据这个主题,但我想。然而,你可以下载 WordPress 的主题样本测试数据的 XML 这里

这一步是可选的,因为没有任何内容的新的 WordPress 网站。如果你不希望导入任何额外的页面和样本数据到你的网站,你可以跳过下一节。如果你想类似的演示现场工作和修改的基础,那么这是给你的。

重要提示:如果您的网站是不是一个全新安装,没有内容,但现有的内容和它已经页,需要记住的是,如果你选择了这个文件,将增加大量的页面,职位,类别和标签(和媒体是非常重要的导入)到你的网站,你可以看到编辑或导入后删除。

输入

  1. 转到工具> 导入在 WordPress 的菜单
  2. 点击上的 WordPress 链接
  3. 安装它要求的插件并激活,如果您尚未安装它。
  4. 现在,你应该看到一个选择文件按钮工具> 导入> WordPress 的页面。
  5. 上传.XML 数据文件。如果选择要导入的媒体或没有(图像)。
  6. 等待导入过程完成。当它完成后它会这么说。
  7. 转到外观> 菜单菜单区域添加到例如头部。
  8. 转到外观> 窗口小部件,并添加一些小部件到您的侧栏。

您的页面现在应该类似于演示页。请参阅头版指南,如果你想使用一个静态页面/非博客主页。

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s5″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Theme updates

If this is your first-time install or if you use the wordpress.org version of the theme, you can skip this step.

It is a good idea to keep your theme up to date with the latest version, as it often includes important bugfixes or new neat features. If a new version of the theme is available, do the following to update it:

  1. Download the latest version.
  2. Locate the hueman.zip file to upload.
  3. Go to Appearance > Themes in the WordPress menu
  4. Activate a default theme temporarily, such as Twenty Twelve (to be able to delete your current theme)
  5. Click on the theme you wish to update, and press the red delete link bottom right. Your admin panel options should remain saved.
  6. Upload the new hueman.zip, as you did on first-time install, and activate it.

You are now running the latest and best version of the theme!

Important: If you haven’t used a child theme for your theme customizations, you must do the following before each update:

  • Backup your custom.css file if you have used it, it will be overwritten and needs to be re-added after the update.
  • Backup your additional language files if you have created/modified any, they will be removed and need to be re-added after the update.
  • Backup any other custom code.
[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

主题更新

如果这是你第一次安装,或者如果您使用的主题的 wordpress.org 版本,你可以跳过这一步。

这是保持你的主题是最新的最新的版本,因为它通常包括重要的 bug 修正或新的简洁的功能是一个好主意。如果主题的一个新的版本可用,请执行以下操作来更新它:

  1. 下载最新版本。
  2. 找到 hueman.zip 要上传的文件。
  3. 转到外观> 主题在 WordPress 的菜单
  4. 激活默认主题是暂时的,如二十二(要能删除你的当前主题)
  5. 点击您要更新的主题,并按下红色的删除链接右下角。你的管理面板选项应该继续保存。
  6. 上传新 hueman.zip,因为你做了 第一次安装,并激活它。

您现在正在运行的主题的最新和最好的版本!

重要提示:如果你还没有使用一个子主题为主题的自定义,你必须做的每一个更新之前执行以下操作:

  • 如果你已经用它备份您的 custom.css 文件,它会被覆盖,需要重新添加更新后。
  • 在更新后重新添加,如果你已经创建/修改的任何,他们将被删除,需要备份您的其他语言文件。
  • 备份任何其他自定义代码。
[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s6″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Theme options

Each option in the admin panel is pretty well described there and easy to use already, so we will just go through the sections in short so you can get an idea of the overall structure – and point out the important things.

General

This is where you will find general options for the whole theme. This typically includes favicon upload, custom RSS feed option, analytics tracking code field and so on.

  • Responsive Layout: If you choose to disable responsive.css, you may need to do further changes in style.css for the site to work completely as un-responsive, as there are some mediaqueries in this file as well – mainly for the menus.

Blog

Here you will find all options that relates to posts – mainly the blog homepage, the single post pages as well as archive pages.

  • Heading & Subheading: This text appears at the top of the posts homepage.
  • Featured Post Count: By adjusting this you turn the slider on / off.
  • Single – Share Buttons: Disable the in-built article sharing buttons if you wish to use a plugin instead.

    Note: If your Google+ button is not appearing, you need to make sure that your server has urlCurl enabled. Ask your webhost to enable cURL, and make sure that safe_mode is not on. Otherwise it will not work.

    If you wish to add more sharing icons, please refer to Sharrre documentation. The file to modify via a child theme would be /inc/sharrre.php.

  • Single – Author Bio: Note that this block will only appear if a description is set for the user writing the article.

Header

  • Custom Logo: The max-height of the logo can be adjusted from styling options. The the uploaded image should always have the double height of the max-height in order to be high resolution – often preferably in PNG format with transparent background.
  • Header Image: This options is for a full centered header image instead of logo.

Footer

  • Footer Widget Columns: This is where you enable footer widgets. Select the column count you wish to use, and then go to Appearance > Widgets and add your widgets to the Footer 1/2/3/4 boxes. Usually 3 columns are recommended in order for it to look best on all screen resolutions.

Layout

Here you can set a specific layout for each one of the standard WordPress page sections. If a specific page or post has another layout set, the single and page options set here will be overridden by that option. If you just want one sidebar layout for the entire website, you only need to modify the Global option.

To set a layout for a specific page or post, you need to go to that page or post and select which layout to use below the large text field.

Sidebars

This is where you can create unlimited sidebar widget areas for your theme! The sidebar title is seen at the top of the widget box in Appearance > Widgets. The sidebar ID is used in template files.

To add a sidebar you have created for a specific page or post, you need to go to that page or post, and select sidebar from the dropdown menu below the large text field.

Important: Make sure that each sidebar area that you create has a unique ID, for example “sidebar-24” or “sidebar-about”. Only use lowercase letters and no spaces for the IDs.

You must save options in order to be able to see the new widget area in the dropdowns below.

Social Links

Here you create and re-order your Social Links as you wish. These links will appear in the header and footer of your theme in most cases.

The icons can be given a specific color if you wish, or you can just leave that option blank and it will use the default setting.

The icon names can be found here – FontAwesome gives you the option to choose between 370 unique icons to use. Example of names to fill in the admin panel would be “fa-facebook”, “fa-twitter” and “fa-google-plus”.

Styling

The dynamic styles in this theme gives you the ability to change color of large parts of theme in seconds.

Important: Make sure to tick the checkbox “Enable to use” at the top of the styling options in order to turn this feature on. You may also need to empty all caches if you use a cache plugin. And finally you may also need to force-refresh the page while viewing it by pressing F5.

Advanced: The dynamic styles will be added directly to the head of your theme. This is according to WordPress best practices, but if you do not want it printed out there, simply inspect the code of your page with the styling options set. Copy the CSS from head into your child theme’s style.css file or this theme’s custom.css (which you need to enable), and disable dynamic styling.

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

主题选项

在管理面板的每个选项得很好描述有且易于已经在使用,所以我们只是去通过做空部分,因此你可以得到整体结构的一个想法 – 并指出重要的事情。

一般

在这里,你会发现整个主题常规选项。这通常包括图标上传,自定义 RSS 源的选择,分析跟踪代码字段等。

  • 响应布局:如果您选择禁用 responsive.css,你可能需要做的 style.css 进一步改变为网站完全正常工作未响应,因为在这个文件中的一些 mediaqueries 以及-主要用于菜单。

博客

在这里,你会发现,涉及的职位所有选项 – 主要是博客首页,单篇文章页面,以及存档页。

  • 标题和副标题:本文出现在帖子主页的顶部。
  • 特色帖子数:通过调整这个你打开滑盖的开/关。
  • 单-共享按钮:禁用内置文章共享按钮,如果你想使用插件来代替。

    注意:如果您的 Google+按钮没有出现,你需要确保你的服务器启用了 urlCurl 。问问你的虚拟主机提供商,使卷曲,并确保 safe_mode 设置为不上。否则将无法正常工作。

    如果你想添加更多的共享图标,请参考 Sharrre 文档。该文件通过子主题修改将/inc/sharrre.php 。

  • 单人-作者简介:需要注意的是,如果一个描述是写文章的用户该块才会出现。

  • 自定义标识:标识的最大高度可以从样式选项进行调整。在上传的图像应始终具有最大高度的两倍高度,以便高分辨率-通常最好是 PNG 格式的透明背景。
  • 标题图片:此选项是一个完整的心头形象,而不是标志。

页脚

  • 页脚小工具栏:这是你能页脚部件。选择列数要使用,然后转到外观> 窗口小部件,并添加小部件到页脚 1/2/3/4 箱。通常 3 列的建议,以便为它寻找最好所有的屏幕分辨率。

设计

在这里你可以设置为标准的 WordPress 页部分中的每一个特定的布局。如果一个特定的页面或交有其他布局设置,单页选项在这里设置将受该选项覆盖。如果你只是想为整个网站 1 侧边栏的布局,你只需要修改全局选项。

要设置布局特定页面或交的,你需要去到该网页或张贴,并选择使用下面的大文本字段,它的布局。

侧边栏

在这里,您可以创建你的主题无限的侧边栏小工具区域!侧边栏标题被认为是在小部件盒的顶部外观> 窗口小部件。侧边栏的 ID 被用在模板文件。

要添加您为特定页面或交创建一个侧边栏,你需要去到该页面或文章,并选择侧边栏从下面的大文本字段的下拉菜单。

重要提示:请确保您创建的每个侧边栏区都有一个唯一的 ID,例如 “侧边栏-24” 或 “侧边栏约” 。只使用小写字母和的 ID 没有空格。

您必须保存的选项,以便能够看到新的小工具区域在下面的下拉列表。

社会联系

在这里,您可以创建和重新排序的社会联系,如你所愿。这些链接会出现在你的主题在大多数情况下,页眉和页脚。

该图标可以给出一个特定的颜色,如果你愿意,也可以只保留该选项空白,它将使用默认设置。

该图标的名称,可以发现在这里 – FontAwesome 给你 370 独特的图标到使用之间进行选择的选项。名称的实例,以填补在管理面板将是 “FA-脸谱”,“FA-推特” 和 “FA-谷 ​​歌加” 。

造型

动态样式在这个主题让你改变主题的大部分颜色以秒为单位的能力。

重要提示:请务必勾选复选框 “允许使用” 在造型的选择上,以打开此功能。您可能还需要清空所有的缓存,如果你使用一个缓存插件。最后,你可能还需要强行刷新页面,同时按 F5 查看它。

高级:动态样式将被直接添加到你的主题的头上。这是根据 WordPress 的最佳实践,但是如果你不希望它印在那里,简单地检查你的网页的代码设置样式选项。从头部的 CSS 复制到子主题的 style.css 的文件或这个主题的 custom.css(你需要启用),并禁止动感的造型。

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s7″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Shortcodes

This theme comes bundled with a few simple shortcodes mainly for content structure. If you want to add additional shortcodes, there are many plugins out there to install.

Here is how to use them:

  • Divider Line
    [hr]
  • Highlight Text
    [highlight]My highlighted text[/highlight]
  • Dropcap (large first letter)
    [dropcap]A[/dropcap]nother dropcap here.

Note: If you add the dropcap in the beginning of the article, it will disappear from the excerpt. To fix this, when editing the post, click Screen Options top right. Then enable Excerpt and you can write your own custom excerpt in the content box below the main text field.

 

  • Pullquote Left
    [pullquote-left]Pullquote text[/pullquote-left]
  • Pullquote Right
    [pullquote-right]Pullquote text[/pullquote-right]
  • Responsive Columns
    [column size="one-half"]...[/column] [column size="one-half" last="true"]...[/column][column size=”one-third”]…[/column] [column size=”one-third”]…[/column] [column size=”one-third” last=”true”]…[/column]

 

[column size=”two-third”]…[/column] [column size=”one-third” last=”true”]…[/column] [column size=”one-fourth”]…[/column] [column size=”one-fourth”]…[/column] [column size=”one-fourth”]…[/column] [column size=”one-fourth” last=”true”]…[/column] [column size=”three-fourth”]…[/column] [column size=”one-fourth” last=”true”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth” last=”true”]…[/column]

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

简码

这个主题捆绑了几个简单的简码主要用于内容结构。如果要添加其他简,有很多的插件在那里安装。

下面是如何使用它们:

  • Divider Line
    [hr]
  • Highlight Text
    [highlight]My highlighted text[/highlight]
  • Dropcap (large first letter)
    [dropcap]A[/dropcap]nother dropcap here.

Note: If you add the dropcap in the beginning of the article, it will disappear from the excerpt. To fix this, when editing the post, click Screen Options top right. Then enable Excerpt and you can write your own custom excerpt in the content box below the main text field.

 

  • Pullquote Left
    [pullquote-left]Pullquote text[/pullquote-left]
  • Pullquote Right
    [pullquote-right]Pullquote text[/pullquote-right]
  • Responsive Columns
    [column size="one-half"]...[/column] [column size="one-half" last="true"]...[/column][column size=”one-third”]…[/column] [column size=”one-third”]…[/column] [column size=”one-third” last=”true”]…[/column][column size=”two-third”]…[/column] [column size=”one-third” last=”true”]…[/column]

 

[column size=”one-fourth”]…[/column] [column size=”one-fourth”]…[/column] [column size=”one-fourth”]…[/column] [column size=”one-fourth” last=”true”]…[/column] [column size=”three-fourth”]…[/column] [column size=”one-fourth” last=”true”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth”]…[/column] [column size=”one-fifth” last=”true”]…[/column]

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s8″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Theme Customization

This section is very important to read if you plan to edit any files within the theme – whether it is adding custom functions, custom styles, new language files or modifying other function-related files. Spending some extra minutes to read this and do it right from the very beginning can save a lot of time and headaches later on.

Most of the information below can be found and read more about elsewhere on the web a well if you wish to go more in-depth, as it’s common practices. I’ve summarized the core parts of it, which you are likely to use the most.

Let us begin!

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

主题定制

这部分是非常重要的阅读,如果你打算在主题中编辑的所有文件 -无论是添加自定义功能,自定义样式,新的语言文件或修改其他功能相关的文件。花一些额外的时间阅读这一点,这样做的权利从一开始就可以节省大量的时间和头痛以后。

大多数以下信息可以找到并阅读更多关于其他地方在网络上以及如果你希望去更深入的,因为它是常见的做法。我总结了它的核心部分,你很可能会用得最多。

让我们开始吧!

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s9″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Using a Child Theme

If you intend to edit the code of the theme, translate it or place any custom files in the theme folder it is highly recommended to use a child theme. Otherwise all of your modifications will disappear once you update the theme – unless you backup and re-add the files afterwards.

I would only recommend using the custom.css option instead if you are doing minor CSS modifications that can be easily backed up.

  • Download the sample child theme – specifically made for this theme to get you started! Upload the .zip via admin just as with any other theme, rename the folder to anything you wish.
  • Learn more how to use child themes here.

This theme has been built with child themes in mind, and therefore all theme functions are pluggable – which means you can overwrite them by copying a function from the parent theme and pasting it into the child theme’s functions.php, modify it as you wish – and it will use your modified function instead the original one.

Load certain functionality from the child theme instead

This only applies for files loaded from the parent theme’s functions.php. Let’s say we wish to load the responsive.css file from our child theme’s directory instead. We then need to copy the alx_styles() function to functions.php of the child theme (not including add_action, add_filter or !function_exists – just the function).

Now we have this function in our child theme – but it makes absolutely no difference, and still loads all files from the parent theme.

function alx_styles() { wp_enqueue_style( ‘style’, get_stylesheet_uri() ); if ( !ot_get_option(‘responsive’) ) { wp_enqueue_style( ‘responsive’, get_template_directory_uri().’/responsive.css’ ); } if ( ot_get_option(‘custom’) ) { wp_enqueue_style( ‘custom’, get_template_directory_uri().’/custom.css’ ); } wp_enqueue_style( ‘font-awesome’, get_template_directory_uri().’/fonts/font-awesome.min.css’ ); }

To load from the child theme instead, change get_template_directory_uri toget_stylesheet_directory_uri for the responsive.css file. The rest of the files will still load from the parent theme, as they use get_template_directory_uri. Like this:

function alx_styles() {
wp_enqueue_style( ‘style’, get_stylesheet_uri() );
if ( !ot_get_option(‘responsive’) ) { wp_enqueue_style( ‘responsive’, get_stylesheet_directory_uri().’/responsive.css’ ); }
if ( ot_get_option(‘custom’) ) { wp_enqueue_style( ‘custom’, get_template_directory_uri().’/custom.css’ ); }
wp_enqueue_style( ‘font-awesome’, get_template_directory_uri().’/fonts/font-awesome.min.css’ );
}

The same method would be used to change language files folder. You would then copy over the whole alx_load() function, but only modify this one line in it:

// Load theme languages
load_theme_textdomain( ‘themename’, get_template_directory().’/languages’ );

To this:

// Load theme languages
load_theme_textdomain( ‘themename’, get_stylesheet_directory().’/languages’ );

Now the language files will be loaded from the /language/ folder of your child theme instead. Simple, isn’t it? This way your changes will always stay safe in your child theme folder, no matter how many updates you do to the parent theme. To summarize:

  • get_template_directory – file loads from parent theme
  • get_template_directory_uri – file loads from parent theme
  • get_stylesheet_directory – file loads from child theme
  • get_stylesheet_directory_uri – file loads from child theme

Important: Always copy over the entire function to your child theme, and only modify the part that you wish to change – leave the rest of the function as it is.

If you were to only include the lines you are changing in the function, and leave the rest of the functionality out, those parts would disappear and stop working.

Disabling functions

You can also completely disable functionality with the child theme replacement method. Let’s say you don’t want the plugin installation notice in your admin panel, or the “Install Plugins” item in your menu. All you would need to add is this to your child theme’s functions.php:
function alx_plugins() { }
Simply emptying the function, disabling it completely.

Replacing page templates

Finally, we wish to modify the page.php template with some custom code. All we need to do then is just copy over page.php from the parent theme to the child theme, and now this file will be used instead – and you are free to modify it without having to fear losing it when updating the theme.

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

使用子主题

如果您打算编辑主题的代码,把它翻译或将在主题文件夹中,强烈建议使用任何自定义文件儿童主题。否则,所有的修改将消失,一旦你更新的主题-除非你的备份和重新添加文件之后。

我只想建议使用 custom.css 选项,而如果你正在做,可以轻松地备份较小的 CSS 修改。

  • 下载示例子主题 -专做这个主题,让你开始!上传通过管理的.zip,就像任何其他的主题,该文件夹重命名为你想要什么。
  • 了解详情如何使用子主题在这里

此主题已建成的儿童主题的头脑,因此所有的主题功能是可插拔的-这意味着你可以从父主题复制功能,并将其粘贴到子主题的 functions.php 中覆盖它们,修改它如你所愿-它会使用修改后的功能,而不是原来的。

加载某些功能的子主题,而不是

这仅适用于从父主题的加载文件 functions.php 。比方说,我们希望从我们的儿童题材的目录加载 responsive.css 文件代替。然后,我们需要的 alx_styles()函数复制到的子主题的 functions.php(不包括 add_action,或的 add_filter function_exists – !只是功能)。

现在,我们有我们的子主题此功能 – 但它使绝对没有什么区别,而且还加载所有文件从父主题。

> 功能 alx_styles(){wp_enqueue_style(“风格”,get_stylesheet_uri()); 如果 {wp_enqueue_style(’ 回应’,get_template_directory_uri()’/ responsive.css“。)(ot_get_option(’ 响应’)!); } 如果(ot_get_option(’ 定制’)){wp_enqueue_style(“自定义”,get_template_directory_uri()’/ custom.css’); } wp_enqueue_style(“字体真棒’,get_template_directory_uri()’/字体/字体 awesome.min.css’); }

从子主题,而不是加载,改变 get_template_directory_uriget_stylesheet_directory_uri 为 responsive.css 文件。该文件的其余部分仍然会从父主题加载,因为它们使用 get_template_directory_uri 。像这样:

功能
alx_styles(){wp_enqueue_style(“ 风格
”,get_stylesheet_uri());(!ot_get_option(’ 响应’))如果 {wp_enqueue_style(’ 响应’,get_stylesheet_directory_uri()’/ responsive.css’); }
如果(ot_get_option(’ 定制’)){wp_enqueue_style(“自定义”,get_template_directory_uri()’/ custom.css’); }
wp_enqueue_style(“字体真棒’,get_template_directory_uri()’/字体/字体
awesome.min.css’);}

同样的方法将被用来改变语言文件夹。然后,您可以复制到整个 alx_load()函数,但只能修改它这一行:

//加载主题语言
load_theme_textdomain(’THEMENAME’,get_template_directory()’/语言’);

要这样:

//加载主题语言
load_theme_textdomain(’THEMENAME’,get_stylesheet_directory()’/语言’);

现在的语言文件会从你的孩子的主题/语言/文件夹中加载来代替。很简单,不是吗?这样,您的更改将始终保持安全在你的子主题文件夹,不管你有多少更新,做父母的主题。总结:

  • get_template_directory -从父主题文件加载
  • get_template_directory_uri -从父主题文件加载
  • get_stylesheet_directory -从儿童主题文件加载
  • get_stylesheet_directory_uri -从儿童主题文件加载

重要提示:请务必复制在整个功能的子主题,并且只修改您要更改的部分-离开此功能的其余部分,因为它是。

如果你只包括你正在改变在功能上线,并留下的功能出了休息,这些部分就会消失而停止工作。

禁用功能

您也可以完全禁用功能与儿童主题替换方法。比方说,你不想安装插件的通知,在你的管理面板中,或者在你的菜单中的 “安装插件” 项。所有你需要补充的是这孩子的主题的 functions.php 中:功能 alx_plugins(){} 简单的排空功能,完全禁用它。

更换页面模板

最后,我们希望修改 page.php 模板,一些自定义代码。所有我们需要做的就是从父主题只是复制了 page.php 到儿童题材,而现在该文件将被使用 – 你可以自由地修改,而不必担心更新的主题时,失去它​​。

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s10″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Theme File Structure

Here is a quick summary of how the files in this theme are structured. It will hopefully make things easier to find!

Folders

  • /fonts/ – Includes any self-hosted font files and Font Awesome css (icons)
  • /functions/ – This folder contains everything that is admin-panel related
  • /functions/img/ – Admin panel images
  • /functions/js/ – Admin panel javascript
  • /functions/plugins/ – Plugins that are not available on wordpress.org but bundled with the theme for easy installation
  • /functions/widgets/ – The custom widgets included with the theme
  • /img/ – Theme images
  • /img/ie/ – Images used for Internet Explorer compatibility
  • /inc/ – Includes all template-parts (partials) that are non-standard to WordPress, but often are used in several files
  • /js/ – Theme javascript. All custom theme scripts are in scripts.js
  • /js/ie/ – Javascript used for Internet Explorer compatibility
  • /languages/ – Contains a language file that you can use to translate or change texts in the theme
  • /option-tree/ – This folder is the OptionTree framework plugin running in fully-integrated theme mode. It ties in with /functions/meta-boxes.php and/functions/theme-options.php and the ot_get_option() function used in template files. Relates to the admin panel, to create theme options. It’s best to leave this folder alone.
  • /page-templates/ – Contains all page templates for the theme, such as Child Menu

Files

  • custom.css – Used for your custom styles
  • responsive.css – Contains almost all the CSS that creates the responsive layout
  • changelog.txt – Information about changes made in all updates
  • license.txt – The main theme license
  • readme.txt – Contains all additional license information

The rest of the files have a standard WordPress structure.

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

主题文件结构

下面是在这个主题的文件是如何构造一个简单的总结。这将有望使事情更容易找到!

文件夹

  • /字体/ -包括任何自托管的字体文件,字体真棒 CSS(图标)
  • /功能/ -此文件夹包含一切,这是管理面板相关
  • /功能/ IMG / -管理面板的图像
  • /功能/ JS / -管理面板的 JavaScript
  • /功能/插件/ -插件,不提供 wordpress.org 但捆绑了主题为便于安装
  • /功能/部件/ -包含主题的自定义部件
  • / IMG / -主题图片
  • / IMG / IE / -用于 Internet Explorer 的兼容性图片
  • / INC / -包括所有模板部件(谐音)是非标准到 WordPress,但往往在几个文件中使用
  • / JS / -主题的 JavaScript 。所有的自定义主题脚本都在 scripts.js
  • / JS / IE / – Javascript 的用于 Internet Explorer 的兼容性
  • /语言/ -包含可用于翻译或改变文本的主题语言文件
  • /选树/ -此文件夹是 OptionTree 框架插件的完全集成的主题模式下运行。它栓在/functions/meta-boxes.php/functions/theme-options.phpot_get_option()在模板文件中使用的功能。涉及管理面板,创建主题选项。这是最好单独离开这个文件夹。
  • /页面模板/ -包含主题的页面模板,如儿童菜单

  • custom.css -用于您的自定义样式
  • responsive.css -包含几乎所有创建响应布局的 CSS
  • changelog.txt -有关的所有更新的更改
  • LICENSE.TXT -主旋律许可证
  • readme.txt 文件 -包含所有附加许可证信息

该文件的其余部分有一个标准的 WordPress 结构。

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s11″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

CSS Styling

Theme related

If you are not using Theme Options > Styling combined with your own custom css, you can skip this part.

If you have issues with your CSS styling changes not showing up or working correctly, remember that this is the order in which the styles are loaded in the theme:

  1. style.css
  2. responsive.css
  3. custom.css
  4. Dynamic CSS output

The dynamic CSS is added at the end of head tag. This means that the dynamic styles will override your custom.css / child theme styles – unless you specify the class/id more or use the !important CSS value.

How to fix CSS override issues

  1. Set your dynamic styles in theme options.
  2. Visit the website, inspect the code, copy the dynamic styles from head of the theme into your child theme’s style.css. Disable dynamic styles.
  3. You now have no more overriding issues.

If you think that responsive.css still overrides styles, use @import to import it at the top of style.css of the child theme and disable it in theme options so it doesn’t load twice.

If you styling changes still do not appear:

  • If you run any cache plugin, make sure to empty all caches.
  • When viewing the webpage, press F5 to force-refresh it.

CSS basics

This is for people who are pretty new to CSS and have never used or heard the word Firebug. It is not theme-related but deals with CSS+Firebug usage, which is essential for easy modification of any styles.

Change styling

You look at your page and say to yourself, “I would like to restyle that element right there on the my page”. But how do you know what the CSS class or id you need to specify in your custom.css? Without tools this would be hard – thankfully both Firefox and Chrome makes it easier.

Enter Firebug

This addon that exist both for Firefox and for Chrome (as a lite version) will save you a lot of time. I use it my development all the time – it’s incredibly useful.

Installed it? Good. Now, go to your website and right click on any element you want. For example, let’s say you want to recolor the dropcap shortcode text color, that you’ve just inserted on your page. To find out what class or ID this element uses, right click on it and select “Inspect Element with Firebug“. This will open up a window at the bottom. To the left side you should see the HTML. On the right, the CSS.

Try hovering over the HTML-section for the button. You will see that the button will be highlighted so that you can easily see what element you are viewing. The HTML would look something like this: <span class="dropcap">L</span>

The CSS should appear on the right side in the Firebug window (If it doesn’t, click on the<span> part of the code, and it will appear). You should see something like this:
.dropcap
{
color: #444444;
display: block;
float: left;
– etc –
}

And there we go! You’ve found the CSS class you are looking for, and all the CSS styling that is currently used for this element.

There are many good Firebug introduction videos out there on YouTube. Here is one short and simple one I found useful: View Video

As shown here, Firebug also allows you to preview styling changes directly in your browser window. It’s great when you want to see how something looks before adding it. It can also be used to test to remove HTML or CSS values, and many other things.

Adding CSS to custom.css

  1. Go to your WordPress dashboard and then Theme Options > General. Tick the checkbox to enable custom.css (this will load the css file in the theme).
  2. Go to Appearance > Editor. Click on custom.css on the right side in the list.
  3. The code in this file will now appear (most likely empty). Just add your css here and save, and you’re done.

Thanks to Firebug, we now know that our dropcap element is called .dropcap. We want to change the text color to red, so all we need to do is to add this to our custom.css file:
.dropcap { color: red; }
Save it, and your dropcap text should now be red!

This method can be used to restyle any element on your website. It is also useful to use for troubleshooting, to see what CSS styling you may have added that breaks the page and so on.

Happy editing!

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

CSS 样式

主题相关

如果你不使用的主题选项> 造型结合自己的自定义 CSS,你可以跳过这一部分。

如果你有问题,你的 CSS 样式的变化没有显示出来或正常工作,请记住,这是其中的样式在主题加载顺序:

  1. style.css 文件
  2. responsive.css
  3. custom.css
  4. 动态 CSS 输出

动态 CSS 是在 head 标签的末尾添加。这意味着动态的样式将覆盖你的 custom.css /子主题风格 -除非你的类/ ID 的详细说明,或使用重要的!CSS 值。

如何解决 CSS 覆盖问题

  1. 设置你的动态风格的主题选项。
  2. 访问网站,检查代码,从主题的负责人的动态样式复制到你的子主题的 style.css 中。禁用动态样式。
  3. 你现在有没有更多的首要问题。

如果你认为 responsive.css 仍然覆盖的风格,使用 @import 在的子主题的 style.css 顶部的导入,然后在主题选项禁用它,所以它不会加载两次。

如果你改变造型仍然没有出现:

  • 如果你运行任何缓存插件,一定要清空所有缓存。
  • 当浏览的网页,请按 F5 强行刷新。

CSS 基础知识

这是人谁是相当新的 CSS 和从未使用过或听说过这个词萤火虫。它不是主题相关但与 CSS +萤火虫的使用,这是任何样式容易修改必要处理。

改变造型

你看看你的页面,对自己说,“我想 restyle 该元素在那里我的页面” 。但你怎么知道的 CSS 类或 ID,你需要指定你的 custom.css?如果没有工具,这将是很难 – 幸运的是 Firefox 和 Chrome 浏览器更容易。

进入萤火虫

这个插件存在既为 Firefox 和 Chrome 版(作为一个精简版的版本)会为你节省大量的时间。我用它我的开发所有的时间 – 这是非常有用的。

安装了它?好。现在,去你的网站,并右键单击您想要的任何元素。例如,假设你要重新着色的 dropcap 简文本颜色,你刚刚插入您的网页上。为了找出这个元素使用什么样的类或 ID,右击它并选择 “ 检查元素与萤火虫 ” 。这将打开一个窗口,在底部。到了左边,你应该看到 HTML 。在右侧的 CSS 。

尝试将鼠标悬停在 HTML 的部分按钮。你会看到,该按钮将被高亮显示,让您可以很容易地看到哪些因素正在查看。 HTML 代码将是这个样子:的<span class =“dropcap”>→</ SPAN>

CSS 的应该出现在右侧 Firebug 窗口(如果没有,请单击<SPAN> 部分的代码,它会出现)。您应该看到这样的事情
:.dropcap
{
颜色:#444444;
显示:块;
浮动:左;
-等-
}

还有,我们走!你发现你正在寻找的 CSS 类,和所有目前用于此元素的 CSS 样式。

有很多很好的 Firebug 的介绍影片在那里上 YouTube 。这里有一个简短的一个我发现有用:观看视频

如图所示,萤火虫,您还可以直接在浏览器窗口中预览造型变化。当你想看到的东西看起来添加它之前它的伟大。它也可用于测试以除去 HTML 或 CSS 值,和许多其他东西。

添加 CSS 到 custom.css

  1. 转到你的 WordPress 仪表板,然后主题选项> 常规。勾选复选框启用 custom.css(这将加载主题中的 CSS 文件)。
  2. 转到外观> 编辑。点击 custom.css 右侧在列表中。
  3. 在这个文件中的代码现在会出现(最有可能是空的)。只是在这里添加你的 CSS 和保存,就大功告成了。

由于萤火虫,我们现在知道,我们 dropcap 元素称为.dropcap 。我们要改变文字颜色为红色,所以我们需要做的就是把它添加到我们的 custom.css 文件
:.dropcap {颜色:红色; }
保存它,你的 dropcap 文字现在应该是红色的!

此方法可以用来 restyle 在网站上的任何元件。它也是有用的用于故障排除,看看 CSS 样式,你可能会增加,打破了网页等。

快乐编辑!

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s12″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Change Thumbnail Size

To modify the custom thumbnail sizes for your theme, you need to copy over the wholefunction alx_setup() {} to your child theme, using the methods explained above.

Within this function you will find the thumbnail sizes under where it says:
// Thumbnail sizes
Modify the height and width values as you want, using add_image_size codex as guideline to how it works. After that you’ve changed size and saved, you need to run theregenerate thumbnails plugin once before you will see any difference.

Important: If you have trouble with the way thumbnails are upscaling to fit the desired width or height before being cropped, you need to disable the alx_thumbnail_upscale function. You do so by addingfunction alx_thumbnail_upscale() {} to your child theme’s functions.php, disabling the function completely.

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

修改缩略图尺寸

要修改自定义缩略图尺寸为您的主题,你需要复制到整个功能 alx_setup(){}到你的子主题,用上述方法解释。

在这个函数中,你会发现在那里说缩略图大小:// 缩略图大小 修改高度和宽度值,只要你想,使用 add_image_size 食品法典委员会为导向,以它是如何工作。之后,你已经改变了大小并保存,你需要运行的再生缩略图插件过一次,你会看到任何区别。

重要提示:如果您有麻烦缩略图升频被裁掉之前,以适应所需的宽度或高度的方式,你需要禁用 alx_thumbnail_upscale 功能。您可以通过添加这样做的功能 alx_thumbnail_upscale(){}到你的子主题的 functions.php 中,完全禁用该功能。

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s13″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Additional Information

Extra information that you may find useful.

Font Awesome (icon) issues?

If you have trouble with Font Awesome showing strange characters instead of icons, you are most likely using a CDN or external host in some way for the font files. Certain browsers may have issues with that, as they follow certain web standards. (Also make sure that your font files were uploaded correctly, and empty caches)

This can be fixed with for example this sample .htaccess file from MaxCDN. If you wish to read more about this, it relates to CORS headers.

Wrong Facebook and Google+ thumbnails?

If your shared posts show wrong thumbnails on social networks, see the Facebook Thumb Fixer plugin below.

Useful plugins

Many common problems or missing features can usually be solved with plugins. Here is a list of some great ones.

Recommended theme editing software

  • Firefox – The web browser of choice for me, although there are many good ones
  • Firebug – Inspect code directly in the web browser. Lite version for Chrome here. Search on YouTube for video tutorials and you will quickly learn how to use it.
  • PoEdit – Translate your theme. Read how to translate here.
  • Notepad++ – A great text editor to modify theme code
  • FileZilla – Modify or upload theme files via FTP

Link Resources

Learn more and ask about WordPress’ standard features. WordPress is in itself an extremely well-documented open platform. It is recommended to search for answers via Google / DuckDuckGo first if you have questions – it almost always give useful information or at least point you in the right direction.

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

附加信息

额外的信息,你可能会发现有用的。

字体真棒(图标)的问题?

如果你有麻烦与字体真棒显示奇怪的字符,而不是图标,你最有可能使用的是 CDN 或外部主机以某种方式为字体文件。某些浏览器可能有问题的,因为他们遵循一定的 Web 标准。(还要确保您的字体文件被正确上传,空缓存)

这可以固定例如此示例.htaccess 文件从 MaxCDN 。如果您想了解更多关于这一点,它涉及到 CORS 头。

错误的 Facebook 和 Google+的缩略图?

如果您共享的员额在社交网络上错误的缩略图,看到 Facebook 的拇指固定器插件下方。

有用的插件

许多常见的问题和缺失的功能通常可以解决了插件。下面是一些伟大的清单。

推荐主题编辑软件

  • Firefox 的 -我选择的 Web 浏览器,虽然有很多好的
  • 萤火虫 -直接在 Web 浏览器检查的代码。精简版的版本为 Chrome 这里。在 YouTube 上搜索的视频教程,你很快就能学会如何使用它。
  • PoEdit 软件 -翻译你的主题。了解如何翻译在这里
  • 记事本++ -一个伟大的文本编辑器修改主题代码
  • FileZilla 中 -修改或通过 FTP 上传主题文件

链路资源

了解详情并询问 WordPress 的标准功能。 WordPress 是在本身极为详细记录的开放式平台。建议搜索通过谷歌/ DuckDuckGo 的答案首先,如果您有任何疑问 – 它几乎总是提供有用的信息,或至少点你在正确的方向。

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s14″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

Troubleshooting 101

Do you have a problem with your theme? This quick troubleshooting guide should be the first thing to check through – it will help you find the root cause of the issue.

A WordPress website issue can come from mainly one of 4 areas:

  • Conflicting plugins
  • Broken WordPress install
  • Incorrect server setup
  • The theme itself

Lets find out where your issue is coming from!

Step 1: Check your plugins

The first thing to do is to see if you have any plugins installed. Do you? If so, go to your admin panel and disable all of them. Now, go back to your site and see if the issue remains. If the problem is gone, then re-activate your plugins one-by-one and check the site between each activation. This way you will directly find the plugin(s) that cause problems.

If your issue remains even with all plugins disabled, go on to the next step.

Step 2: Check your customizations

Have you customized your theme in any way before you noticed the issue? If so, go to the theme demo website of the theme and see if you find the same issue there. If you can not see the issue there, you need to take a look at your customized code and find what may be wrong.

Step 3: Is the issue admin panel related?

If you have problems with media uploads, errors in the WordPress dashboard or other access issues, the likely cause is either an incorrectly setup server or a broken WordPress install.

To see if your problem is related to a broken WordPress install or an incorrect server setup, simply activate a WordPress default theme such as Twenty Twelve. Does the issue remain? Then your issue is not theme related. If the issue goes away with a default theme active, then it’s most likely theme related.

  • Do you think your issue is WordPress related? Re-installing WordPress may be a good idea, or asking for help on the wordpress.org forums.
  • Do you think your issue is server related? Try some Google-searching for the issue, or contact your server provider about it.
  • Do you think the issue is coming from the theme? Make sure to read this documentation through. If the issue remains and you are certain it’s coming from the theme, feel free to report the bug on the wordpress.org support forums for hueman.

Note: Remember cache!

If you apply/repair code to fix issues but see no changes on your website when you save it, check if your website has any cache plugin activated. If so, make sure to empty all caches. Also force-refresh the page when viewing it by pressing F5.

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

故障排除 101

你有你的主题有问题?这种快速故障排除指南应检查通过的第一件事-这将帮助您找到根本原因的问题。

一个 WordPress 的网站问题可能来自主要是 4 个方面之一:

  • 冲突的插件
  • 残破的 WordPress 安装
  • 不正确的服务器设置
  • 该主题本身

让我们找出你的问题是从哪里来的!

第 1 步:检查您的插件

要做的第一件事就是查看是否有安装任何插件。你做?如果是这样,转到您的管理面板,并禁用所有的人。现在,回到你的网站,看看问题是否仍然存在。如果问题消失了,然后重新激活你的插件一个接一个,检查每一个激活的网站。这样,你会直接找到该插件(S)引起的问题。

如果问题仍未即使禁用所有插件,去到下一个步骤。

第 2 步:检查您的自定义

有您自定义的主题以任何方式你是否注意到这个问题之前?如果是这样,转到主题的主题演示的网站,看看你是否发现了同样的问题出现。如果看不到问题在那里,你需要看看你的定制代码,并查找可能是错误的。

第 3 步:是对问题的管理面板有关系吗?

如果您在 WordPress 仪表板或其他接入问题介质问题上传,错误,可能的原因是要么是设置不正确,服务器或破损的 WordPress 安装。

要看到,如果你的问题涉及到一个破碎的 WordPress 安装或不​​正确的服务器设置,只需激活一个 WordPress 默认主题,如二十二。请问这个问题保持?那么你的问题是不是主题相关。如果问题消失了默认主题活动的,那么它是最有可能的主题有关。

  • 你觉得你的问题是 WordPress 的关系?重新安装 WordPress 的可能是一个不错的主意,或寻求上的帮助 wordpress.org 论坛
  • 你觉得你的问题是与服务器相关的?尝试一些谷歌,搜索的问题,或联系您的服务器提供商了。
  • 你认为这个问题是从主题来吗?请务必通过阅读本文档。如果问题仍然存在,您确定它是从主题来了,随时报告错误的 wordpress.org 支持论坛 hueman 。

注意:请记住缓存!

如果你申请/修复代码来解决问题,但看到当你将它保存在你的网站没有任何改变,请检查您的网站有任何缓存插件激活。如果是的话,一定要清空所有缓存。同时强行刷新按 F5 查看它时,页面。

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”solid” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”s15″ class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

FAQ

Q: Why are social sharing buttons missing Google Plus? — A: You need to enable urlCurl with safe_mode off on your server for G+ to work. Ask your webhost to do so. If you are unable to, you can disable the buttons and use any other plugin instead.

Q: My old thumbnails have different sizes, why? — A: Thumbnails uploaded before changing theme will not be automatically re-cropped. To fix this, you need to run theRegenerate Thumbnails plugin once.

Q: I did not use featured images before and have many posts, what do I do? — A: Use the Easy Add Thumbnail plugin to automatically make the first image uploaded to each post a featured image.

Q: Why is my featured image not appearing on the single post page? — A: You need to use the “Image” format option for it to show up, as not everyone wants to show the featured image at the top for the “Standard” post format.

Q: My gallery format post shows images twice, why? — A: This is because you insert a standard gallery into the post itself. This is not needed, as the gallery format post will auto-display attached images in the slider above.

Q: My slider gallery includes images I only want to show in the content below — A: The gallery format will always show all attached images. For it to not show up, go to Media > Add New and upload it there. Then go back to the post and add it.

Q: How do I make the homepage slider auto-progress? — A: In /inc/featured.php changeslideshow: false to true with a child theme.

Thank you for reading!

[/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””]

常见问题:

问:为什么社会共享按钮缺少谷歌加? -答:您需要启用 urlCurl 与 safe_mode 设置关闭服务器上的 G +工作。问问你的虚拟主机提供商这样做。如果你不能,你可以关闭按钮,并使用其他的插件来代替。

问:我的老缩略图的大小不同,为什么? -答:缩略图变化的主题将不会自动重新裁剪之前上载。为了解决这个问题,你需要运行重新生成缩略图插件一次。

问:我以前没有使用功能的图像,有很多帖子,我该怎么办? -答:使用易添加缩略图插件自动进行上传到每个第一图像发布特色图片。

问:为什么我的特色图片没有出现的单篇文章页面上? -答:您需要使用 “图像” 的格式选项,它展现出来,因为并不是每个人都想展现特色形象的 “标准顶部 “的帖子格式。

问:我的画廊格式后显示的图像两次,为什么? -答:这是因为你插入一个标准库进入后本身。这是不需要的,因为画廊的格式后会自动显示附件图片中的滑块上方。

问:我的滑块的画廊包括图片我只希望在下面的内容,以显示 -答:库格式将始终显示所有连接的图像。对于它没有露面,到媒体> 添加新并上传它。然后回到岗位,并添加它。

问:如何让我的网页滑块自动进展如何? -答:在/inc/featured.php 改变幻灯片:假的真与儿童主题。

感谢您的阅读!

[/one_half][/fullwidth][fullwidth background_color=”” background_image=”” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_repeat=”no-repeat” background_position=”left top” video_url=”” video_aspect_ratio=”16:9″ video_webm=”” video_mp4=”” video_ogv=”” video_preview_image=”” overlay_color=”” overlay_opacity=”0.5″ video_mute=”yes” video_loop=”yes” fade=”no” border_size=”0px” border_color=”” border_style=”” padding_top=”20″ padding_bottom=”20″ padding_left=”0″ padding_right=”0″ hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”no” menu_anchor=”” class=”” id=””][one_half last=”no” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””][alert type=”success” accent_color=”” background_color=”” border_size=”1px” icon=”” box_shadow=”yes” animation_type=”0″ animation_direction=”left” animation_speed=”1″ class=”” id=””] 原文:英语原文地址点击进入[/alert][/one_half][one_half last=”yes” spacing=”yes” center_content=”no” hide_on_mobile=”no” background_color=”” background_image=”” background_repeat=”no-repeat” background_position=”left top” border_position=”all” border_size=”0px” border_color=”” border_style=”” padding=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”” animation_speed=”0.1″ class=”” id=””][alert type=”error” accent_color=”” background_color=”” border_size=”1px” icon=”” box_shadow=”yes” animation_type=”0″ animation_direction=”left” animation_speed=”1″ class=”” id=””] 翻译:帮助我们修订此文档>>[/alert][/one_half][/fullwidth]