[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() if ( ot_get_option('custom') ) 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') )
if ( ot_get_option('custom') )
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() 如果 (ot_get_option('定製'))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(' 響應')) 如果
如果 (ot_get_option('定製'))
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: L

The CSS should appear on the right side in the Firebug window (If it doesn't, click on the 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
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 程式碼將是這個樣子:

CSS 的應該出現在右側 Firebug 視窗 (如果沒有,請單擊部分的程式碼,它會出現) 。您應該看到這樣的事情
:.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]