WordPress カスタムテーマの作成方法

公開: 2021-08-06

WordPress は世界中の Web サイトの大きな割合を占めており、現在オンラインになっている全サイトの 37% を占めています。この成功には多くの理由と要因がありますが、主な理由の 1 つは、すべてのユーザーが利用できる機能の人気です。プラグイン、テーマ、投稿、ページ、カテゴリ、分類法、ユーザーロール、メディア処理などはほんの数例です。 WordPress を最大限に活用するには、ユーザーがこれらすべての機能の使用方法を学習して学習することをお勧めします。このブログでは、WordPress テーマに焦点を当てて説明し、WordPress カスタムテーマの作成方法に必要な基本事項について説明します。

カスタムテーマとは何ですか?

サイトのフロントエンドにあるものはすべて、「テーマ」と呼ばれるものを使用して実行および制御されています。 Web サイトのテーマは、Web サイトの特定のデザインと機能を担当します。テーマの例については、 WordPress テーマリポジトリまたはThemeforestを参照してください。ここには、探索してダウンロードできる数千のテーマがリストされています。

確立された WordPress テーマは素晴らしいものですが、能力と必要性があれば、クライアントや自分自身のために独自のカスタムテーマを作成したり、販売を目的として市場に提出したりすることもできます。商用テーマを作成するときは、コーディング標準、ファイルとフォルダーの構造などについてマーケットプレイスのガイドラインに従う必要があります。これらのガイドラインの詳細については、マーケットプレイスの Web サイトを参照してください。

このブログでは、チュートリアルを実行して、プロセスに関連するすべての基本と手順をカバーすることにより、独自の WordPress テーマを作成する方法の基本的な概要を示します.

WordPress カスタムテーマを作成する

WordPress テーマは、テンプレートファイル、スクリプト、スタイル、画像などで構築されます。先に進むには、カスタムテーマの構築に必要な PHP、HTML、および CSS の実用的な知識が必要です。 JavaScript を理解することも、追加の利点になる可能性があります。

まず、テーマに「アップドラフト」という名前を付けます。 wp-content/themes内に「Updraft」というフォルダーを作成します。この「Updraft」フォルダー内に、テーマ関連のコードを記述し、ファイル、画像、フォントなどを保存します。

カスタム WordPress テーマの主なファイルは次のとおりです。

スタイル.css
index.php
関数.php

style.cssがメインのスタイルシートファイルになり、このファイルにすべての CSS を追加できます。テーマに関する情報ヘッダーを含める必要があることに注意してください。ヘッダーは以下の形式のようになり、 style.cssの上部にある必要があります。

 [コード]
/*
テーマ名：上昇気流
テーマ URI: https://updraftplus.com
作者: アップドラフトプラス
著者URI: https://updraftplus.com
説明: Web サイト用に作成されたカスタム テーマ。
バージョン: 1.0
ライセンス: GNU General Public License v2 以降
ライセンス URI: http://www.gnu.org/licenses/gpl-2.0.html
テキスト ドメイン: 上昇気流
*/
[/コード]

次に、外観 >> テーマに移動します。ここに、テーマが一覧表示されます。 それをアクティブにします。サイトのフロントエンドを確認すると、まだテーマに何も追加されていないため、空白の画面が表示されます..

画像、スクリプト、およびスタイルをテーマディレクトリに保存することを忘れないでください。テーマディレクトリは、「wp-content/themes/Updraft」フォルダを参照します。適切なフォルダー構造を使用して、画像、スクリプト、およびスタイル用の特定のフォルダーを作成して、それらを整理してください。ファイルをそれぞれのディレクトリにコピーします。

関数ファイル

functions.phpは、さまざまな目的のためにコードを追加できるファイルです。このファイルは、WordPress の初期化中に自動的に読み込まれ、そこに記述されたコードが自動的に実行されます。

functions.phpファイル内の次の操作は、通常、次の順序で実行されます。

テーマのスタイルシートとスクリプトをキューに追加します (JS ファイルと CSS ファイルを Web サイトに追加します)。
サイドバー、ナビゲーションメニュー、投稿サムネイルなどを有効にします。
アプリケーション全体で使用される関数を定義します。
等。

ユーザーは、次のようにfunctions.phpファイルからスタイルとスクリプトを追加できます。詳細なドキュメントについては、次のリンクを参照してください。

 [コード]
関数 include_js_css() {
wp_register_style( "bootstrap", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "ブートストラップ" );
wp_register_script('bootstrap', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), false, true);
wp_enqueue_script('bootstrap');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/コード]

get_stylesheet_directory_uri ()関数は、アクティブなテーマディレクトリの相対パスを提供します。コードの残りの部分は、アセットのパスであることがわかります。

同様に、ナビゲーションメニューを追加するには、サムネイルを投稿します。

 [コード]
関数 updraft_theme_setup() {
add_theme_support( '投稿サムネイル' );
register_nav_menus(
配列（
'プライマリ' => __( 'プライマリ メニュー' ),
'footer1=' => __( 'フッターメニュー' ),
'shop' => __( 'ショップページメニュー' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/コード]

次に、WordPress ダッシュボードに移動して、投稿またはページを追加します。 [注目の画像] セクションが表示されます。さらに、[外観] >> [メニュー] の下にある[場所の管理] の下に、プライマリメニューとフッターメニューがあります。

これらは、'Function' ファイルの使用中にカバーできる基本的な機能のほんの一部です。必要に応じて、このファイルに追加できるものは他にもたくさんあります。

テンプレートファイル

テーマを作成するとき、テンプレートファイルを使用して、Web サイトのさまざまな部分のレイアウトとデザインに影響を与えることができます。たとえば、header.php テンプレートを使用してヘッダーを作成したり、comments.php テンプレートを使用してサイトにコメントを含めたりします。テンプレートファイルの拡張子は.phpです。 PHPファイルなので、すべてのページがHTMLとして出力されます。

テンプレートを使用すると、開発者はコードを複数のファイルに配布できます。以下に、問題のファイルの一部を示します。

index.php : メインテンプレート。このファイルは、投稿のリストを担当する必要があります。 Settings >> Readingsから Posts ページを設定すると、このテンプレートが実行されます。
page.php : このテンプレートは、ページのレンダリングを担当します。この設定は、カスタムページテンプレートを個々のページに割り当てることでオーバーライドできます。
single.php : 単一の投稿がクエリされるときに使用されます。
header.php : このテンプレートにヘッダーパーツを追加します。
footer.php : このテンプレートにフッターパーツを追加します。
sidebar.php : このテンプレートにウィジェットを追加します。

ここで利用可能なすべてのテンプレートファイルのリストを取得します。

カスタムページテンプレート

デフォルトでは、すべてのページはpage.phpテンプレートを介してレンダリングされます。しかし実際には、異なるページに別々のフローを表示する必要がある場合があります。このシナリオでは、カスタムページテンプレートの機能を使用することをお勧めします。

たとえば、「キャリア」ページがあり、このページにコードを追加したい場合。これを実現するには、 career.phpファイルをテーマディレクトリに作成し、以下のコメントをファイルの先頭に配置する必要があります。

 [コード]
<?php
/*
テンプレート名: キャリア
*/
[/コード]

次に、ページ編集セクションに移動し、[ページ属性]ボックスの下からこの「キャリア」テンプレートを割り当てます。

Career ページにアクセスすると、 career.phpのコードが実行されます。

ヘッダーファイル

Web サイトには、すべてのページに共通のヘッダーがあります。この共通ヘッダーをheader.phpに配置できます。ヘッダーコードは次のようになります。

 [コード]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<頭>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- メニュー -->
[/コード]

上記のコードでは、WordPress で利用可能ないくつかの関数を使用していることに気付くでしょう。

wp_head() : このメソッドは、スクリプト、スタイル、メタタグなどの重要な要素をドキュメントに挿入します。
body_class() : body 要素にさまざまなクラスを追加します。
wp_body_open() : body タグを開いた直後にコードを挿入するために使用されます。この例は、Google アナリティクススクリプトです。

メニューはwp_nav_menu()関数を介して動的に追加できます。最初に外観>>メニューの下にメニューを作成し、「プライマリ」ロケーションを割り当てたと仮定します。 以下のコードは、メニュー要素を動的に生成します。

 [コード]
<?php
wp_nav_menu(
配列（
'theme_location' => 'プライマリ',
'container_class' => 'メニュー',
)
);
?>
[/コード]

ヘッダーファイルを設定したら、 get_header()関数を使用して、このファイルを他のテンプレートに含めます。

フッターファイル

ヘッダーファイルと同様に、フッターの共通コードはfooter.phpテンプレート内に入ります。

 [コード]
<!-- フッター要素 -->
<?php wp_footer(); ?>
</body>
</html>
[/コード]

ここでは、要素、具体的にはスクリプトをこの場所に挿入するwp_footer()を使用します。 get_footer()を使用すると、このファイルの内容が他の場所に含まれます。

サイドバーファイル

サイドバーは、メインコンテンツ内には表示されないサイトの情報を表示するために使用される縦の列です。人気のある記事、広告バナー、ニュースレターの送信フォームなどが含まれる場合があります。サイドバーには、管理者がカスタマイズできるウィジェットが含まれています。 sidebar.phpテンプレートには、サイトウィジェットが含まれます。

この例では、以下のコードをfunctions.phpファイルに追加して、基本的なサイドバーを作成します。

 [コード]
関数 updraft_widgets_init() {
register_sidebar(
配列（
'name' => esc_html__( ホームサイドバー' ),
'id' => 'サイドバー-1',
'description' => esc_html__( 'ここにウィジェットを追加して、サイドバーに表示します。' ),
'before_widget' => '<section class="widget">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/コード]

次に、外観 >> ウィジェットに移動します。 ここに上記のサイドバーがあります。この例では、このサイドバーにいくつかのウィジェットを追加します。このサイドバーをフロントエンドに追加するには、次のコードをsidebar.php に追加します。

 [コード]
<div class="サイドバー">
<?php
if ( is_active_sidebar( 'サイドバー-1' ) ) {
dynamic_sidebar( 'サイドバー-1' );
}
?>
</div>
[/コード]

最後に、メソッドに「 get_sidebar()」という名前を付けることを忘れないでください。これにより、必要に応じて他のページのどこにでもサイドバーを簡単に含めることができます。

ページと投稿のレンダリング

既に述べたように、カスタムページテンプレートを使用するページを除き、すべての WordPress ページは、 page.phpファイルに記述したコードを使用してレンダリングおよび実行されます。以下のコードは、ページタイトル、説明、アイキャッチ画像を含むページを表示する例です。

 [コード]
<?php
get_header();
?>
<div class="コンテンツエリア">
<main class="site-main">
<?php
while ( have_posts() ) :
ポスト（）;
?>
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
<header class="entry-header">
<?php the_title(); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
末期;
?>
</メイン>
</div>
<?php
get_footer();
[/コード]

同様のコードがsingle.phpファイル内に入り、投稿情報が表示されます。上記の方法に加えて、投稿の一覧を適切にレンダリングするには ( index.php )、次の方法も使用できます。

the_catgeory() : 投稿のカテゴリリストを表示します。
the_permalink() : 現在の投稿のパーマリンクを表示します。
the_excerpt() : 投稿の抜粋を表示します。

WordPress カスタムテーマの I18n

カスタムテーマを作成するときは、国際化をサポートする方法で開発する必要があることを忘れないようにしてください。これにより、テーマを他の言語に簡単に翻訳できるようになります。

I18n サポートを追加するには、ソースファイルを解析して翻訳可能な文字列を抽出できるテキストドメインを使用することを忘れないでください。この例では、テキストドメイン 'Updraft' を使用していますが、任意の一意の識別子を選択できます。テキストドメインは次のように定義できます。

 [コード]
関数 i18n_setup() {
load_theme_textdomain( 'updraft', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/コード]

テーマファイルで静的文字列を使用するときはいつでも、それらを__()または_e()関数内にラップしてください。

 [コード]
<h2><?php _e('First Name', 'updraft); ?></h2>
<?php echo __('User Email', 'updraft'); ?>
[/コード]

翻訳された言語ファイルを生成するのに役立つ POEDIT などの特別なツールが利用できます。詳細については、このブログを参照してください。

このブログでは、WordPress カスタムテーマの基本的な作成方法について説明しました。しかし、それは多くの時間と忍耐を必要とする広大なトピックです。以下は、WordPress テーマの作成を開始するのに役立つ、知っておくべき役立つリソースです。

WordPress ループ
テンプレートタグ
カテゴリーページ
Function_Reference
コンディショナルタグ
WordPress コーディング標準

WordPress サイトの新しいテーマを作成するときは、変更のたびにテーマをバックアップする必要があることに注意してください。そうしないと、すべての作業が失われるリスクがあります。 UpdraftPlus を使用する – 世界をリードし、最も信頼されている WordPress のバックアップ、復元、クローンのプラグインです。

投稿 WordPress カスタムテーマの作成方法は、UpdraftPlus に最初に掲載されました。 UpdraftPlus – WordPress のバックアップ、復元、移行プラグイン。

WordPress カスタム テーマの作成方法