п»ї http://codex.wordthai.com/index.php?title=Child_Themes&feed=atom&action=history Child Themes - ประวัติà¸à¸²à¸£à¸›à¸£à¸±à¸šà¸›à¸£à¸¸à¸‡ 2024-03-29T16:01:26Z ประวัติà¸à¸²à¸£à¸›à¸£à¸±à¸šà¸›à¸£à¸¸à¸‡à¸‚องหน้านี้ในวิà¸à¸´ MediaWiki 1.13.2 http://codex.wordthai.com/index.php?title=Child_Themes&diff=219&oldid=prev Kazama: สร้างหน้าใหม่: {{Languages| {{en|Child Themes}} {{ja|Child Themes}} {{fr|Thèmes Enfant}} {{pt-br|Temas Filhos}} {{ru|Дочерние темы}} {{sk|Odvodené témy}} {{z... 2011-10-07T03:07:53Z <p>สร้างหน้าใหม่: {{Languages| {{en|Child Themes}} {{ja|Child Themes}} {{fr|Thèmes Enfant}} {{pt-br|Temas Filhos}} {{ru|Дочерние темы}} {{sk|Odvodené témy}} {{z...</p> <p><b>หน้าใหม่</b></p><div>{{Languages|<br /> {{en|Child Themes}}<br /> {{ja|Child Themes}}<br /> {{fr|Thèmes Enfant}}<br /> {{pt-br|Temas Filhos}}<br /> {{ru|Дочерние темы}}<br /> {{sk|Odvodené témy}}<br /> {{zh-hans|å­ä¸»é¢˜}}<br /> }}<br /> <br /> A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. This article shows how to create a basic child theme and explains what you can do with it. As an example parent theme it uses Twenty Ten, the new default theme in [[Version_3.0|WordPress 3.0]].<br /> <br /> Making a child theme is very simple. Create a directory, put a properly formatted ''style.css'' file in it, and you have a child theme! With a little understanding of HTML and [[CSS]], you can make that ''very basic child theme'' modify the styling and layout of a parent theme to any extent without editing the files of the parent theme itself. That way, when the parent theme is updated, your modifications are preserved.<br /> <br /> '''For this reason, child themes are the recommended way of making modifications to a theme.''' <br /> <br /> With a basic understanding of PHP, [[Templates|WordPress Templates]], and the [[Plugin API|WordPress Plugin API]], you can make the child theme extend virtually every aspect of a parent theme, and again, without actually changing the parent theme files. <br /> <br /> == Directory structure ==<br /> <br /> A child theme resides in its own directory in ''wp-content/themes''. The scheme below shows the location of a child theme along with its parent theme (Twenty Ten) in a typical WordPress directory structure:<br /> <br /> * '''public_html'''<br /> ** '''wp-content''' <br /> *** '''themes''' (directory where all themes are)<br /> **** '''twentyten''' (directory of our example parent theme, Twenty Ten)<br /> **** '''twentyten-child''' (directory of our child theme; can be named anything)<br /> ***** '''style.css''' (required file in a child theme; must be named ''style.css'')<br /> <br /> This directory can contain as little as a ''style.css'' file, and as much as any full-fledged WordPress theme contains:<br /> <br /> # style.css (required)<br /> # functions.php (optional)<br /> # Template files (optional)<br /> # Other files (optional)<br /> <br /> Let’s see how each of these works.<br /> <br /> == The required style.css file ==<br /> <br /> ''style.css'' is the one and only '''required''' file in a child theme. It provides the information header by which WordPress recognizes the child theme, and '''it replaces the style.css of the parent'''.<br /> <br /> As with any WordPress theme, the information header must be at the top of the file, the only difference being that in a child theme the &lt;code&gt;Template:&lt;/code&gt; line is required, so that WordPress knows which theme is the parent of the child theme.<br /> <br /> Here is an example information header of a child theme’s ''style.css'':<br /> <br /> &lt;pre&gt;<br /> /*<br /> Theme Name: Twenty Eleven Child<br /> Theme URI: http: //example.com/<br /> Description: Child theme for the Twenty Eleven theme <br /> Author: Your name here<br /> Author URI: http: //example.com/about/<br /> Template: twentyeleven<br /> Version: 0.1.0<br /> */<br /> &lt;/pre&gt;<br /> <br /> A quick explanation of each line:<br /> <br /> * &lt;code&gt;Theme Name&lt;/code&gt;. ('''required''') Child theme '''name'''.<br /> * &lt;code&gt;Theme URI&lt;/code&gt;. (optional) Child theme webpage.<br /> * &lt;code&gt;Description&lt;/code&gt;. (optional) What this theme is. E.g.: My first child theme. Hurrah!<br /> * &lt;code&gt;Author URI&lt;/code&gt;. (optional) Author webpage.<br /> * &lt;code&gt;Author&lt;/code&gt;. (optional) Author name.<br /> * &lt;code&gt;Template&lt;/code&gt;. ('''required''') '''directory''' name of parent theme, case-sensitive.<br /> ** '''NOTE'''. You have to switch to a different theme and back to the child theme when you modify this line.<br /> * &lt;code&gt;Version&lt;/code&gt;. (optional) Child theme version. E.g.: 0.1, 1.0, etc.<br /> <br /> The part after the closing &lt;code&gt;*/&lt;/code&gt; of the header works as a regular stylesheet file. It is where you put the styling rules you want WordPress to apply. <br /> <br /> Note that a child theme’s stylesheet replaces the stylesheet of the parent completely. (The parent’s stylesheet is not loaded at all by WordPress.) So, if you simply want to modify a few small things in the styling and layout of the parent —rather than make something new from scratch— you have to import explicitly the stylesheet of the parent, and then add your modifications. The following example shows how to use the &lt;code&gt;@import&lt;/code&gt; rule to do that.<br /> <br /> == Example of a basic Child Theme ==<br /> <br /> Our parent theme for this example is Twenty Eleven. We like most everything about it, except the color of the site’s title, which we want to change from black to green. Using a child theme, all it takes is three simple steps:<br /> <br /> # Make a new directory in ''wp-content/themes'', and name it ''twentyeleven-child'' (or anything you like).<br /> # Save the code below in a file named ''style.css'', and drop this file in the new directory.<br /> # Go to Dashboard › Themes and activate your new theme, the Twenty Ten Child.<br /> <br /> &lt;pre&gt;<br /> /*<br /> Theme Name: Twentyeleven Child<br /> Description: Child theme for the twentyeleven theme <br /> Author: Your name here<br /> Template: twentyeleven<br /> */<br /> <br /> @import url(&quot;../twentyeleven/style.css&quot;);<br /> <br /> #site-title a {<br /> color: #009900;<br /> }<br /> &lt;/pre&gt;<br /> <br /> Here is what the above code does, step by step:<br /> <br /> # &lt;code&gt;/*&lt;/code&gt; opens the child theme’s information header.<br /> # &lt;code&gt;Theme Name:&lt;/code&gt; declares the child theme’s name.<br /> # &lt;code&gt;Description:&lt;/code&gt; describes what the theme is. (Optional; can be omitted.)<br /> # &lt;code&gt;Author:&lt;/code&gt; declares the author’s name. (Optional; can be omitted.)<br /> # &lt;code&gt;Template:&lt;/code&gt; declares the child theme’s parent; i.e., the directory of the theme whose templates the child uses.<br /> # &lt;code&gt;*/&lt;/code&gt; closes the child’s information header.<br /> # The &lt;code&gt;@import&lt;/code&gt; rule brings in the parent’s stylesheet.<br /> # The &lt;code&gt;#site-title a&lt;/code&gt; rule defines a colour (green) for the site’s name, overriding the corresponding rule of the parent.<br /> <br /> === Note on the &lt;code&gt;@import&lt;/code&gt; rule ===<br /> <br /> There must be no other CSS rules above the &lt;code&gt;@import&lt;/code&gt; rule. If you put other rules above it, it will be invalidated and the stylesheet of the parent will not be imported.<br /> <br /> === Note on RTL support ===<br /> <br /> To support RTL languages, add '''rtl.css''' file to your child theme, containing:<br /> <br /> &lt;pre&gt;<br /> /*<br /> Theme Name: Twenty Ten Child<br /> Template: twentyeleven<br /> */<br /> <br /> @import url(&quot;../twentyeleven/rtl.css&quot;);<br /> &lt;/pre&gt;<br /> <br /> WordPress auto-loading rtl.css file only if [[Function Reference/is rtl|is_rtl()]]. Even if the parent theme has no rtl.css file, it's recommendad to add the rtl.css file to your child theme.<br /> <br /> === Note on Twenty Eleven and using the Dark Theme or Link Color option ===<br /> The twenty eleven dark theme stylesheet and the link color option are loaded after the child theme stylesheet, therefore some color changes might not show as they are loaded earlier.<br /> <br /> There is no need to change the dark stylesheet or code in the twenty eleven parent directory, as we can correct this by giving our color change priority, we do this by adding !important to the style.<br /> <br /> Here we will change the Site Title color, and the negate the Site Title hover color, if we did not like the title color or it being shown as a link.<br /> <br /> &lt;pre&gt;<br /> /*<br /> Theme Name: Twenty Eleven Child<br /> Description: Child theme for the Twenty Eleven theme <br /> Author: Your name here<br /> Template: twentyeleven<br /> */<br /> <br /> @import url(&quot;../twentyeleven/style.css&quot;);<br /> <br /> /* This will override site title color even on the dark theme */<br /> #site-title a {<br /> color: #009900 !important;<br /> }<br /> <br /> /* This will override the changed link color */<br /> #site-title a:focus,<br /> #site-title a:hover,<br /> #site-title a:active {<br /> color: #009900 !important;<br /> }<br /> &lt;/pre&gt;<br /> <br /> The selected style colors with the !important will now not be changed by the dark stylesheet or the link color option.<br /> <br /> == Using functions.php ==<br /> <br /> Unlike ''style.css'', the ''functions.php'' of a child theme does not override its counterpart from the parent. Instead, it is '''loaded in addition to the parent’s functions.php'''. (Specifically, it is loaded right ''before'' the parent’s file.)<br /> <br /> In that way, the ''functions.php'' of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its ''functions.php'' file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a ''functions.php'' file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme.<br /> <br /> The structure of ''functions.php'' is simple: An opening PHP tag at the top, a closing PHP tag at the bottom, and, between them, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary ''functions.php'' file that does one simple thing: Adds a favicon link to the &lt;code&gt;head&lt;/code&gt; element of HTML pages.<br /> <br /> &lt;pre&gt;<br /> function favicon_link() {<br /> echo '&lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;/favicon.ico&quot; /&gt;' . &quot;\n&quot;;<br /> }<br /> add_action('wp_head', 'favicon_link');<br /> &lt;/pre&gt;<br /> <br /> TIP FOR THEME DEVELOPERS. The fact that a child theme’s ''functions.php'' is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. E.g.:<br /> <br /> &lt;pre&gt;<br /> if (!function_exists('theme_special_nav')) {<br /> function theme_special_nav() {<br /> // Do something.<br /> }<br /> }<br /> &lt;/pre&gt;<br /> <br /> In that way, a child theme can replace a PHP function of the parent by simply declaring it again.<br /> <br /> ==== Referencing / Including Files in Your Child Theme ====<br /> <br /> When you need to include files that reside within your child theme's directory structure, you will use [[Function_Reference/get_stylesheet_directory|get_stylesheet_directory()]]. Because the parent template's style.css is replaced by your child theme's style.css, and your style.css resides in the root of your child theme's subdirectory, get_stylesheet_directory() points to your child theme's directory (not the parent theme's directory).<br /> <br /> Here's an example, using &lt;code&gt;require_once&lt;/code&gt;, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme's directory structure.<br /> <br /> &lt;pre&gt;<br /> require_once( get_stylesheet_directory(). '/my_included_file.php' );<br /> &lt;/pre&gt;<br /> <br /> ==== Using Post Formats ====<br /> A child theme inherits [[Post Formats|post formats]] as defined by the parent theme. But, when creating child themes, be aware that using ''add_theme_support('post-formats')'' will '''override''' the formats as defined by the parent theme, not add to it.<br /> <br /> == Template files ==<br /> <br /> [[Templates]] in a child theme behave just like ''style.css'', in that '''they override their namesakes''' from the parent. A child theme can override '''any''' parental template by simply using a file with the same name. (NOTE. ''index.php'' can be overriden only in WordPress 3.0 and newer.)<br /> <br /> Again, this WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated.<br /> <br /> Here are a few example cases for using template files in a child theme:<br /> <br /> * To add a template that is not offered by the parent theme (e.g., a template for a sitemap page, or for single-column pages, that will be available to select in the Page Edit screen).<br /> * To add a more specific template (see [[Template Hierarchy]]) than what the parent uses (e.g., a ''tag.php'' template to use for tag archives instead of the generic ''archive.php'' of the parent).<br /> * To replace a template of the parent (e.g., make your own ''home.php'' to override the parent’s ''home.php'').<br /> <br /> == Other files ==<br /> <br /> In addition to ''style.css'', ''functions.php'', and to template files like ''index.php'', and ''home.php'', a child theme can use any type of file full-fledged themes use, as long as that file is properly linked. For example, a child theme can use icons and images that are linked from its stylesheet, JavaScript files linked from the top or bottom of pages, or extra PHP files called from its [[Templates|templates]] or from its ''functions.php'' file.<br /> <br /> == Resources ==<br /> <br /> * [[Theme Development]]<br /> * [http://themeshaper.com/modify-wordpress-themes/ How to Modify WordPress Themes the Smart Way] - four-part series on child themes <br /> * [http://op111.net/53 How to make a child theme for WordPress: A pictorial introduction for beginners] - illustrated introduction to child themes<br /> * [http://aaron.jorb.in/blog/2010/04/05/introducing-thirty-ten/ Introducing Thirty Ten] - guide to creating a Twenty Ten Child Theme<br /> * [http://theme.fm/2011/07/how-to-create-a-child-theme-based-on-twenty-eleven-791/ How to: Create a Child Theme Based on Twenty Eleven]<br /> <br /> [[Category:Design and Layout]]<br /> [[Category:UI Link]]&lt;!-- link from wp-admin/update-core.php --&gt;</div> Kazama