Skip to content

Commit

Permalink
Merge pull request #16 from jawordpressorg/update-document
Browse files Browse the repository at this point in the history 
原文の更新
  • Loading branch information
@t-hamano
t-hamano authored Aug 19, 2023
2 parents b2b6c11 + 79ed333 commit 7ae209d
Show file tree
Hide file tree
Showing 55 changed files with 3,068 additions and 2,405 deletions.
187 changes: 109 additions & 78 deletions theme/advanced-topics/block-patterns.md
View file

Large diffs are not rendered by default.

153 changes: 94 additions & 59 deletions theme/advanced-topics/child-themes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,15 @@ As indicated in the overview, a child theme inherits the look and feel of the pa
Child themes:

* make your modifications portable and replicable;

* keep customization separate from parent theme functions;

* allow parent themes to be updated without destroying your modifications;

* allow you to take advantage of the effort and testing put into parent theme;

* save on development time since you are not recreating the wheel; and

* are a *great way* to start learning about theme development.

Note: If you are making extensive customizations – beyond styles and a few theme files – creating a parent theme might be a better option than a child theme. Creating a parent theme allows you to avoid issues with deprecated code in the future. This needs to be decided on a case-by-case basis.
Expand All @@ -33,23 +38,26 @@ The directory needs a name. It’s best practice to give a child theme the same

Next, you’ll need to create a stylesheet file named `style.css`, which will contain all of the CSS rules and declarations that control the look of your theme. Your stylesheet must contain the below required header comment at the very top of the file. This tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent.

/\*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
\*/
```css
/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
*/
```

The following information is required:

* **Theme Name –** needs to be unique to your theme

* **Template –** the name of the parent theme directory. The parent theme in our example is the Twenty Fifteen theme, so the Template will be `twentyfifteen`. You may be working with a different theme, so adjust accordingly.

Add remaining information as applicable. The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).
Expand All @@ -65,43 +73,58 @@ The ideal way of enqueuing stylesheets is for the parent theme to load both (par
There are a few things to keep in mind:

* the child theme is loaded before the parent theme.

* everything is hooked to an action with a priority (default is 10) but the ones with the same priority run in the order they were loaded.

* for each handle, only the first call to `[wp_enqueue_style()](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)` is relevant (others ignored).

* the dependency parameter of `[wp_enqueue_style()](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)` affects the order of loading.

* without a version number, site visitors will get whatever their browser has cached, instead of the new version.

* using a function to get the theme’s version will return the active theme’s version (child if there is a child).

* the functions named `get_stylesheet`\* look for a child theme first and then the parent.

The recommended way of enqueuing the stylesheets is to add a `wp_enqueue_scripts` action and use `[wp_enqueue_style()](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)` in your child theme’s `functions.php`.
The recommended way of enqueuing the stylesheets is to add a `wp_enqueue_scripts` action and use `[wp_enqueue_style()](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)` in your child theme’s `functions.php`.
If you do not have one, create a `functions.php` in your child theme’s directory. The first line of your child theme’s `functions.php` will be an opening PHP tag (<?php), after which you can write the PHP code according to what your parent theme does.

If the parent theme loads both stylesheets, the child theme does not need to do anything.

If the parent theme loads its style using a function starting with `get_template`, such as `[get_template_directory()](https://developer.wordpress.org/reference/functions/get_template_directory/)` and `[get_template_directory_uri()](https://developer.wordpress.org/reference/functions/get_template_directory_uri/)`, the child theme needs to load just the child styles, using the parent’s handle in the dependency parameter.

add\_action( 'wp\_enqueue\_scripts', 'my\_theme\_enqueue\_styles' );
function my\_theme\_enqueue\_styles() {
wp\_enqueue\_style( 'child-style', get\_stylesheet\_uri(),
array( 'parenthandle' ),
wp\_get\_theme()->get('Version') // this only works if you have Version in the style header
);
```php
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style',
get_stylesheet_uri(),
array( 'parenthandle' ),
wp_get_theme()->get( 'Version' ) // This only works if you have Version defined in the style header.
);
}
```

If the parent theme loads its style using a function starting with `get_stylesheet`, such as `[get_stylesheet_directory()](https://developer.wordpress.org/reference/functions/get_stylesheet_directory/)` and `[get_stylesheet_directory_uri()](https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/)`, the child theme needs to load both parent and child stylesheets. Be sure to use the same handle name as the parent does for the parent styles.

add\_action( 'wp\_enqueue\_scripts', 'my\_theme\_enqueue\_styles' );
function my\_theme\_enqueue\_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp\_get\_theme();
wp\_enqueue\_style( $parenthandle, get\_template\_directory\_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp\_enqueue\_style( 'child-style', get\_stylesheet\_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
```php
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle,
get_template_directory_uri() . '/style.css',
array(), // If the parent theme code has a dependency, copy it to here.
$theme->parent()->get( 'Version' )
);
wp_enqueue_style( 'child-style',
get_stylesheet_uri(),
array( $parenthandle ),
$theme->get( 'Version' ) // This only works if you have Version defined in the style header.
);
}
```

### 4\. Install child theme

Expand Down Expand Up @@ -137,13 +160,14 @@ In that way, the `functions.php` of a child theme provides a smart, trouble-free

The structure of `functions.php` is simple: An opening PHP tag at the top, and below it, 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 head element of HTML pages.

```php
<?php // Opening PHP tag - nothing should be before this, not even whitespace
// Custom Function to Include
function my\_favicon\_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\\n";
function my_favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add\_action( 'wp\_head', 'my\_favicon\_link' );
add_action( 'wp_head', 'my_favicon_link' );
```

Tip: 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.

Expand All @@ -163,11 +187,15 @@ When you need to include files that reside within your child theme’s directory

Below is an example illustrating how to use [get\_stylesheet\_directory()](https://developer.wordpress.org/reference/functions/get_stylesheet_directory/) when referencing a file stored within the child theme directory:

<?php require\_once( get\_stylesheet\_directory(). '/my\_included\_file.php' ); ?>
```php
<?php require_once get_stylesheet_directory() . '/my_included_file.php'; ?>
```

Meanwhile, this example uses `[get_stylesheet_directory_uri()](https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/)` to display an image that is stored within the `/images` folder in the child theme directory.

<img src="<?php echo get\_stylesheet\_directory\_uri(); ?>/images/my\_picture.png" alt="" />
```php
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/my_picture.png" alt="" />
```

Unlike `get_stylesheet_directory()`, which returns a file path, `get_stylesheet_directory_uri()` returns a URL, which is useful for front-end assets.

Expand All @@ -177,11 +205,13 @@ Scripts and styles should each be enqueued with their own function, and then tho

WordPress won’t automatically load the stylesheet for your child theme on the front-end. Below is an example of using the `[wp_enqueue_scripts()](https://developer.wordpress.org/reference/functions/wp_enqueue_scripts/)` action hook to call a function that enqueues the child theme’s stylesheet.

```php
<?php
add\_action( 'wp\_enqueue\_scripts', 'my\_plugin\_add\_stylesheet' );
function my\_plugin\_add\_stylesheet() {
wp\_enqueue\_style( 'my-style', get\_stylesheet\_directory\_uri() . '/style.css', false, '1.0', 'all' );
add_action( 'wp_enqueue_scripts', 'my_plugin_add_stylesheet' );
function my_plugin_add_stylesheet() {
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
}
```

## Special Considerations

Expand All @@ -193,18 +223,20 @@ A child theme inherits [post formats](https://developer.wordpress.org/themes/fun

To support RTL languages, add a `rtl.css` file to your child theme, containing:

/\*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
\*/
```css
/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/
```

Even if the parent theme does not have an `rtl.css` file, it’s recommended to add the `rtl.css` file to your child theme. WordPress will auto-load the `rtl.css` file only if `[is_rtl()](https://developer.wordpress.org/reference/functions/is_rtl/)` is true.

### Internationalization

Child themes can be prepared for translation into other languages by using the WordPress [Internationalization API](https://developer.wordpress.org/themes/functionality/internationalization/). There are special considerations regarding internationalization of child themes.

To internationalize a child theme follow these steps:
To internationalize a child theme follow these steps:
1\. Add a languages directory.

* For example: `twentyfifteen-child/languages/`
Expand All @@ -216,32 +248,35 @@ To internationalize a child theme follow these steps:
3\. Load a textdomain

* Use [load\_child\_theme\_textdomain()](https://developer.wordpress.org/reference/functions/load_child_theme_textdomain/) in `functions.php` during the after\_setup\_theme action.

* The text domain defined in [load\_child\_theme\_textdomain()](https://developer.wordpress.org/reference/functions/load_child_theme_textdomain/) should be used to translate all strings in the child theme.

4\. Use GetText functions to add i18n support for your strings.

#### Example: textdomain

```php
<?php
/\*\*
\* Set up My Child Theme's textdomain.
\*
\* Declare textdomain for this child theme.
\* Translations can be added to the /languages/ directory.
\*/
function twentyfifteenchild\_theme\_setup() {
load\_child\_theme\_textdomain( 'twentyfifteenchild', get\_stylesheet\_directory() . '/languages' );
/**
* Set up My Child Theme's textdomain.
*
* Declare textdomain for this child theme.
* Translations can be added to the /languages/ directory.
*/
function twentyfifteenchild_theme_setup() {
load_child_theme_textdomain( 'twentyfifteenchild', get_stylesheet_directory() . '/languages' );
}
add\_action( 'after\_setup\_theme', 'twentyfifteenchild\_theme\_setup' );
add_action( 'after_setup_theme', 'twentyfifteenchild_theme_setup' );
```

At this point, strings in the child theme are ready for translation. To ensure they are properly internationalized for translation, each string needs to have the `twentyfifteenchild` textdomain.

#### Example: gettext functions

Here is an example of echoing the phrase “Code is Poetry”:

<?php
esc\_html\_e( 'Code is Poetry', 'twentyfifteenchild' );
?>
```php
<?php esc_html_e( 'Code is Poetry', 'twentyfifteenchild' ); ?>
```

The text domain defined in `[load_child_theme_textdomain()](https://developer.wordpress.org/reference/functions/load_child_theme_textdomain/)` should be used to translate all strings in the child theme. In the event that a template file from the parent them has been included, the textdomain should be changed from the one defined in the parent theme to the one defined by the child theme.
The text domain defined in `[load_child_theme_textdomain()](https://developer.wordpress.org/reference/functions/load_child_theme_textdomain/)` should be used to translate all strings in the child theme. In the event that a template file from the parent them has been included, the textdomain should be changed from the one defined in the parent theme to the one defined by the child theme.
Loading

0 comments on commit 7ae209d

Please sign in to comment.