什么是WordPress主题及其基本结构
一つWordPressテーマとは、ウェブサイトの外観や表示方法を定義するものであり、テンプレート、スタイルシート、PHPコードなどが協力して動作する一連のファイルの集合です。その基本構造を理解することは、開発を始めるための第一歩です。コアとなるファイルには通常、以下のものが含まれます：
- style.cssトピックのメインスタイルシートであり、トピックのメタ情報（トピック名、著者、説明など）も含まれています。
- index.phpデフォルトのメインテンプレートファイルは、テーマにとって必須のファイルです。
- functions.php：トピック機能の追加、登録スクリプトやスタイルの設定、カスタム機能の定義などに使用されます。
- header.phpウェブサイトのヘッダー領域を定義します。
- footer.phpウェブサイトのフッター領域を定義します。
- page.php と single.phpそれぞれ「ページ」と「記事」のレンダリングに使用されます。
これらのテンプレートファイルは以下の規則に従っています：WordPressこのテンプレートの階層体系により、開発者は特定の名前を持つファイルを作成することでデフォルトの表示ロジックを上書きし、異なるコンテンツタイプの出力を正確に制御することができます。
開始する前に、ローカル開発環境（Local by FlywheelやXAMPPなど）またはテスト用サーバーが必要です。また、コードエディタ（VS Codeなど）とFTPクライアント（デプロイ用）も必須です。
推薦図書 WordPressテーマ開発入門ガイド：ゼロからパーソナライズされたウェブサイトを作成する。
最初の基本的なテーマを作成しましょう。
では、最もシンプルでありながらも完全に機能するテーマの作成から始めましょう。まず、あなたの…wp-content/themesカタログの下に新しいフォルダを作成してください。例えば、my-first-themeこれが、すべてのテーマファイルが保存されている場所です。
トピックのスタイルと情報を定義する
作成style.cssファイルを作成し、そのファイルの冒頭に以下のコメントブロックを追加してください。これは…WordPressあるテーマを特定するために必要なものです。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/このコメントブロックでは、トピックに関する情報が提供されています。WordPressバックエンドで表示される情報です。Text Domain国際化のために使用されるもので、テーマの識別子です。
コアテンプレートファイルを構築する
次に、最も基本的なものを作成します。index.phpこれはファイルであり、すべてのページのデフォルトテンプレートです。
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body no numeric noise key 1011>
<header>
<h1><a href="/ja/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</header>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<article>
<h2><a href="/ja/</?php the_permalink(); ?>">あなたのウェブサイトのタイトルを表示するには、次のコードを使用してください。</a></h2>
<div>あなたが送信したメッセージは長すぎます。最大300文字まで送信できます。</div>
</article>
<?php
endwhile;
else :
echo '<p>没有找到内容。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>このファイルでは複数のコアが使用されています。WordPressテンプレートタグ、例えば…the_post(), the_title(), the_content()記事をループ処理して出力します。wp_head()とwp_footer()フックは非常に重要です。なぜなら、フックによって次のようなことが可能になるからです：WordPressコア、プラグイン、およびその他のスクリプトに必要なコードを挿入してください。
推薦図書 WordPressテーマ開発：ゼロからプロフェッショナルレベルのウェブサイトテーマを構築するための完全ガイド。
ファイルをサーバーにアップロードしたら、あなたはそれを使用できるようになります。WordPressバックエンドの「外観」→「テーマ」でこのテーマを見つけ、有効にしました。これであなたのウェブサイトはこのミニマルなレイアウトを使用するようになります。
テーマ機能と柔軟性を強化する
基本的な構造ができたら、モジュール化と機能性を導入する必要があります。そうすることで、テーマはより専門的で、メンテナンスもしやすくなります。
コア機能のファイルを導入します。
作成functions.phpこのファイルは、テーマの「中枢」となる部分です。ここでは、テーマの機能をサポートするためのコードや、登録用のナビゲーションメニュー、スタイルシート、スクリプトなどを追加しています。
<?php
function my_theme_setup() {
// 让WordPress管理文档标题
add_theme_support('title-tag');
// 启用文章和页面的特色图像功能
add_theme_support('post-thumbnails');
// 注册一个主菜单
register_nav_menus(array(
'primary' => __('主导航菜单', 'my-first-theme'),
));
// 为RSS feed链接添加支持
add_theme_support('automatic-feed-links');
}
add_action('after_setup_theme', 'my_theme_setup');
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style('main-style', get_stylesheet_uri());
// 引入自定义JavaScript文件
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');
?>add_theme_support()この関数は「モダン」な機能を有効にしています。WordPressトピックの一般的な機能の使用方法。wp_enqueue_style()とwp_enqueue_script()これはリソースを読み込むための標準的な方法であり、依存関係やバージョン管理を正しく処理することができます。
ページヘッダーとページフッターのテンプレートを分離する
「将」index.phpページヘッダーとページフッターのコードを別のファイルに分けることで、コードの再利用性が向上します。作成してください。header.php、以下の内容を含んでいます：開くまでタグの前にあるすべてのコードを作成します。footer.php、閉じることから始まる内容を含んでいます。タグの後から…そのすべてのコードを。そして、その後に…index.phpここで使用されているのはget_header()とget_footer()関数はそれらを導入します。
サイドバーのテンプレートを作成します。
作成するsidebar.phpこのファイルの中には、小さなツールを配置するためのエリアがあります。まず、functions.php「小ツールエリア」を登録します：
推薦図書 ゼロからマスターへ：WordPressテーマ開発の完全ガイドと実践トレーニング。
function my_theme_widgets_init() {
register_sidebar(array(
'name' => __('主侧边栏', 'my-first-theme'),
'id' => 'sidebar-1',
'description' => __('在这里添加小工具。', 'my-first-theme'),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'my_theme_widgets_init');そして、sidebar.php中から小道具を呼び出すエリア：
<?php if (is_active_sidebar('sidebar-1')) : ?>
<aside>
<?php dynamic_sidebar('sidebar-1'); ?>
</aside>
<?php endif; ?>最後に、index.php中で、メインコンテンツエリアの横に使用することができます。get_sidebar()それを呼び出すために。
アプリケーションのスタイリングとレスポンシブデザイン
スタイルが設定されていないテーマは魅力的ではありません。CSSを使用して、テーマを美しく見せ、さまざまなデバイスに適応させます。
基本的なレイアウトスタイルを構築する
はい。style.cssコメントブロックの下に、基本スタイルの追加を始めます。まず、いくつかのCSS変数とリセットスタイルを定義し、その後で基本的なレイアウトを設定します。
:root {
--primary-color: #0073aa;
--text-color: #333;
--background-color: #f5f5f5;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-color);
background: var(--background-color);
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: white;
padding: 2rem;
margin-bottom: 2rem;
border-bottom: 3px solid var(--primary-color);
}
main {
display: grid;
grid-template-columns: 1fr 300px;
gap: 2rem;
}
article {
background: white;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 5px;
}レスポンシブなナビゲーションメニューを実装する
についてfunctions.php登録されたナビゲーションメニューにスタイルを追加し、モバイルデバイスでの使用に適した表示にする必要があります。まず、header.phpメニューを表示します：
<nav>
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
));
?>
</nav>その後、CSSにスタイルを追加し、メディアクエリを使用してモバイル端末に対応させます。
.primary-menu {
display: flex;
list-style: none;
}
.primary-menu li {
margin-left: 1.5rem;
}
.primary-menu a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
}
.primary-menu a:hover {
color: var(--primary-color);
}
/* 响应式设计 */
@media (max-width: 768px) {
main {
grid-template-columns: 1fr; /* 移除侧边栏 */
}
.primary-menu {
flex-direction: column;
}
.primary-menu li {
margin: 0.5rem 0;
}
}記事の特徴的な画像を最適化する
由于我们启用了post-thumbnailsサポートされています。利用可能です。index.phpまたはsingle.phpのループ内で、使用します。the_post_thumbnail()関数を使用して特徴的な画像を表示し、そのサイズを制御するためにCSSクラスを追加します。
概要
このガイドブックを通じて、あなたは以下の内容を学びました：WordPressテーマ開発の核心プロセス：テーマの基本ファイル構造を理解することから、最初の実用的なテーマを作成するまで、そしてその後…functions.php機能を強化し、テンプレートを分割してモジュール化を実現した後、CSSを用いて美観とレスポンシブデザインを施します。WordPressテーマの鍵となるのは、テンプレートの階層構造、コア関数、そしてフック（Hook）システムを理解することです。この小さな出発点から、カスタムの記事タイプや高度なテーマオプションについてさらに探求していくことができます。Gutenbergブロックエディターはより複雑な機能をサポートしており、個々のニーズに真に応えるプロフェッショナルなウェブサイトの構築を可能にします。
FAQ よくある質問
###：テーマ開発は必ずゼロから始めなければならないのでしょうか？
必ずしもそうとは限りません。既存の軽量な「スターターテーマ（Starter Theme）」や「フレームワーク（Framework）」を基に開発を行うこともできます。例えば、Underscores（_s）やSageなどがあります。これらのツールは優れたコード構造とベストプラクティスを提供しており、基本的な設定にかかる時間を大幅に節約できるため、デザインや機能の独自性により多くの時間を割くことができます。
どうやって私のテーマでサブテーマをサポートできるようにするか？
テーマを安全にカスタマイズできるようにするためには、それを「親テーマ」として設計し、ユーザーがスタイルやテンプレートを上書きできるように「子テーマ」の作成を許可する必要があります。テーマが適切なテンプレート構造に従っていることを確認する必要があります。style.cssリソースの参照に絶対パスを使用するのではなく、代わりに…get_template_directory_uri()などの関数です。サブトピックには1つだけ必要です。style.cssおよびオプションのfunctions.phpそうすることで、すべての親テーマの機能を継承することができます。
開発時によく見られるエラーをどのようにデバッグするか？
見せるWordPressデバッグモードは非常に重要です。あなたのwp-config.phpファイルの中で、WP_DEBUG定数は次のように設定されています。trueこれにより、すべてのPHPエラー、警告、および通知が画面上に表示されます。また、ブラウザの開発者ツール（F12キーを押す）を使用してCSSやJavaScriptのエラーをチェックし、コンソールやネットワークタブも確認することができます。
開発が完了したら、どのようにして自分のテーマを公開するのでしょうか？
もしあなたがそのトピックを公式の場所に提出したい場合は、以下の手順に従ってください：WordPressテーマカタログは、コードの品質、セキュリティ、国際化、アクセシビリティなどを含むテーマ審査基準を厳守しなければなりません。公式マニュアルをよくお読みください。自分で配布する場合は、すべてのテーマファイルをZIP形式に圧縮して、ユーザーが直接ダウンロードできるようにしてください。WordPressバックエンドの「トピックのアップロード」機能を使用してインストールしてください。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語