Wordpressのオリジナルテーマを作成してみる | プログラミングスクールのカモをやってみた

こんにちは、ヒカルです。少し休んでいましたが記事投稿を再開します。

目次非表示

WordPressとは
- 特徴
WordPressのオリジナルテーマ作成
参考文献

WordPressとは

WordPress（ワードプレス）は、世界中で広く使われているオープンソースのCMS（コンテンツ管理システム）です。初心者からプロの開発者まで、誰でも簡単にウェブサイトやブログを作成・運営できるプラットフォームとして人気があります。

特徴

無料で利用可能
基本的にソフトウェア自体は無料で提供され、オープンソースとして自由にカスタマイズ可能です。

テーマによるデザイン変更
多数の無料・有料テーマがあり、クリックだけでデザインを変更できます。

プラグインによる拡張
50,000以上のプラグインを利用して、機能を簡単に追加可能。例: SEO最適化、フォーム作成、eコマース機能など。

ユーザーフレンドリー
管理画面が直感的で、コードの知識がなくても運営が可能です。

柔軟性とカスタマイズ性
開発者向けにPHPやJavaScriptで自由にカスタマイズ可能。

WordPressのオリジナルテーマ作成

WordPressのオリジナルテーマを作成することは、ウェブサイトを独自デザインにするための強力な方法です。以下に、基本的な手順を説明します。

1. 基本的な準備

WordPressのインストール
ローカル環境（例: XAMPP、Local by Flywheel）やサーバー上でWordPressをセットアップします。
テーマフォルダーを作成
- WordPressインストールディレクトリの wp-content/themes に移動。
- 新しいフォルダを作成し、名前を付けます（例: my-custom-theme）。
必須ファイルの作成
作成するテーマの最低限のファイル：
- style.css: テーマ情報とCSSスタイルを記述。
- index.php: テーマのメインテンプレート。

2. `style.css` の記述

テーマ情報を含むCSSファイルです。以下の例を参考にしてください。

/*
Theme Name: My Custom Theme
Theme URI: http://example.com
Author: Your Name
Author URI: http://example.com
Description: This is a custom WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

3. `index.php` の記述

最低限のHTML構造を記述します。

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body> <header> <h1><?php bloginfo('name'); ?></h1> <p><?php bloginfo('description'); ?></p> </header> <main> <?php if (have_posts()) : while (have_posts()) : the_post(); the_title('<h2>', '</h2>'); the_content(); endwhile; else : echo '<p>No posts found.</p>'; endif; ?> </main>
</body>
</html>

4. テーマを有効化

WordPress管理画面にログイン。
「外観」 > 「テーマ」に移動。
作成したテーマを選択して「有効化」。

5. テーマを拡張する

次のステップでは、必要な機能を追加していきます。

ヘッダーとフッターの分割
header.php と footer.php を作成してコードを分割します。 // header.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php bloginfo('name'); ?></title> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> </head> <body> // footer.php <footer> <p>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p> </footer> </body> </html> index.php で以下のように読み込みます： <?php get_header(); ?>  <?php get_footer(); ?>
テンプレートファイルの追加
- single.php: 個別投稿ページ用。
- page.php: 固定ページ用。
- archive.php: アーカイブページ用。
- 404.php: 404エラーページ用。
メニューとウィジェットの追加
functions.php を作成して以下のように記述： <?php function my_custom_theme_setup() { add_theme_support('menus'); register_nav_menu('primary', 'Primary Menu'); add_theme_support('widgets'); } add_action('after_setup_theme', 'my_custom_theme_setup');
CSSとJavaScriptの追加
functions.php に以下を追加： function my_theme_enqueue_scripts() { wp_enqueue_style('main-style', get_stylesheet_uri()); wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array(), '1.0', true); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');