カテゴリー: WordPress

XAMPPを使ったWordPress開発環境

WordPressで自作のテーマを開発しようと考えています。そのために、XAMPPを使ってWordPressの開発を行うための環境を構築していきます。

目標

XAMPPを使用し、ローカルでWordPressのサイトをテストできる開発環境を構築する。

環境

Windows10
XAMPP 7.4.10

もしXAMPPをインストールしていない場合は、”XAMPPのインストール“に従ってインストールを行ってください。また、 本環境でMariaDBを使用したい場合は、安全のため”XAMPPでMySQLパスワードを設定する“に従ってパスワードを設定してください。

方法

1. WordPressのインストール

wordpress.org からインストールします。

2. WordPressをroot docに配置します。

デフォルトのroot docは、xampp\htdocsになります。

3. Create a new database for WordPress

参考: Using phpMyAdmin wordpress.orgより

XAMPPのControl Panelを起動し、ApacheとMySQLを起動します。その後、phpMyAdmin (localhost/phpmyadmin)にアクセスし、以下のようにWordPress用のデータベースを作成します。

4. 作成したデータベースをWordPressに接続する

localhost/wordpressにアクセスします。私の場合はlocalhost/wordpress/wp-admin/setup-config.phpにリダイレクトされます。

使用言語を選択し、次のページに進みます。

データベースの内容を入力し、Submitをクリックします。データベースの名前は上で作成した名前を入力してください ユーザーネームとホストネーム、パスワードは、phpMyAdminで設定したものを使用します。

ユーザーネームとホストネームは、User accountsから確認できます。

これでデータベースへの接続は完了です。”Run the installation”をクリックして先に進みます。

5. WordPressの情報を入力

サイトのタイトルやユーザー名などを入力します。好きな名前で構いません。ユーザ名とパスワードはWordPressniログインするためのものになります。
入力が完了したら、”Install WordPress”をクリックします。

6. WordPressにログインできるかチェック

localhost/wordpress/wp-admin/ から、上で設定したユーザ名・パスワードでログインします。

補足

Importタブから、既存のWordPressのポストやカスタムフィールド、カテゴリ、タグなどをImport可能です。.xmlファイルとしてExportしたものをImportしてください。

WordPressの子テーマの作り方

目標

WordPressの子テーマとは何か、どのように作るかを理解する。

環境

WordPress 5.5.1
Theme: Sparkling

WordPressテーマと子テーマとは?

テーマとは

WordPress テーマは、WordPress サイト上のコンテンツやその他のデータの視覚的な表示や、訪問者とのインタラクションにおける特定の要素の動作に対し、より多くのコントロールを提供することができます。

From ja.wordpress.org テーマの使用

WordPress のテーマは、サイトの基礎となる統一的なデザインを持つグラフィカルインターフェースを生成するために一緒に動くファイルの集まりです。

From ja.wordpress.org テーマの使用

テーマは、Appearance(外観)>Themes(テーマ)から選択できます.

そして、Appearance(外観)>Customize(カスタマイズ)からカスタマイズできます。

テーマの構成

以下は、テーマのファイル構成の一例です。Appearance(外観)>Theme Editor(テーマエディター)からファイルを見ることができます。これらはテンプレートと呼ばれます。(詳細: テンプレート階層)

  • 必須ファイル
    • index.php: メインのテンプレートファイル
    • style.css
  • 追加のファイル(なくてもテーマはできる)
    • PHP files
      • テンプレートファイル (index.php以外に、header.php, page.php, sidebar.php, 404.php などがある)
    • ローカライゼーションファイル(Localization files): テーマの翻訳など国際化のために使用するファイルです。
    • CSS ファイル
      • bootstrap.css, flexslider.css など
    • Graphics
    • JavaScript
      • customizer.js, functions.js, flexslider-custom.js など
    • Text files
      • license.txt, readme.txt など

子テーマとは何か?

As indicated in the overview, a child theme inherits the look and feel of 子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。

From wpdocs.osdn.jp 子テーマ

子テーマの重要な点は、カスタマイズしたデータが更新時に失われないということです。

テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。

From wpdocs.osdn.jp 子テーマ

子テーマの作り方

参照: wpdocs.osdn.jp 子テーマ > 子テーマの作り方

以下は、上記のサイトの最低限必要なポイントをまとめたものです。

1. 子テーマのための新しいディレクトリを作成

サーバーのwp/wp-content/themesに新しいディレクトリを作成し、”<親テーマ名>-child”という名前を付けます。今回の例では、親テーマがsparklingなので、sparkling-childと名前を付けました。

2. style.cssの作成

作成した<親テーマ名>-childというディレクトリ内に、style.cssというファイルを作成します。style.cssの先頭に次のようにテーマの情報を書きこみます。”Theme URI”は、サーバー上での子テーマへのパス、”Template”は、親テーマのディレクトリ名です。 “Theme Name”は重複しないオリジナルのものにします。

/*
 Theme Name:   Sparkling Child
 Theme URI:    http://example.com/sparkling-child/
 Description:  Sparkling Child Theme
 Author:       Nako
 Author URI:   http://example.com
 Template:     sparkling
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         blog
 Text Domain: sparklingchild
*/

/* Add your css here*/

3. 親テーマのstyle.css読み込みをエンキューする

<親テーマ名>-childディレクトリfunctions.phpを作成します。そこに、親テーマのスタイルシート(‘/style.css’)を読み込む処理heme_enqueue_styles()をエンキューする関数を書きこみます。以下のようになります。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style' , get_template_directory_uri() . '/style.css' );
}
?>

もし親テーマに’/style.css’ 以外のcssがある場合、theme_enque_styles()にそれらを含める必要があります。また、もしも子テーマのstyle.cssが自動で読み込まれない場合は、theme_enque_styles()の中で、’child-style’もエンキューする必要があります。

現時点でのファイル構成

4. 子テーマをインストールしてカスタマイズ

DashboardのAppearance(外観)>Themes(テーマ)を開きます。

作成した子テーマを選択し、カスタマイズしてください。(親テーマのカスタマイズは引き継がれません)

5. 子テーマを有効にする

追記

子テーマを追加することで、cssを読み込む順番が変化します。追加cssは、親テーマのstyle.cssを読み込んだ後、子テーマのstyle.cssを読み込む前に読み込まれます。

例えば、親テーマのみが使用されていた時は、sparkling/style.cssはフォント(Google Fonts)を読み込んだ後に読み込まれていました。そのため、sparkling/style.css内で読み込んだフォントを使用することができていました。

しかし、子テーマを追加した場合、sparkling/style.cssは最初に読み込まれ、その後にフォント(Google Fonts)が読み込まれます。そのため、親テーマのsparkling/style.cssで読み込んだフォントを使用できません。

そのため、このフォントに関わるcssは、子テーマのsparkling-child/style.css内で使用する必要があります。あるいは、すべてのスタイルシートをsparkling-child/function.phpd 内で順番通り読み込む必要があります。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'sparkling-bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css' );
	wp_enqueue_style( 'sparkling-icons', get_template_directory_uri() . '/assets/css/fontawesome-all.min.css', null, '5.1.1.', 'all' );
	wp_enqueue_style( 'font-styles' , '//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700|Roboto+Slab:400,300,700' ,false);
    wp_enqueue_style( 'parent-style' , get_template_directory_uri() . '/style.css' );
}
?>