こんにちは、ヒカルです。少し休んでいましたが記事投稿を再開します。
目次 非表示
WordPress(ワードプレス)は、世界中で広く使われているオープンソースのCMS(コンテンツ管理システム)です。初心者からプロの開発者まで、誰でも簡単にウェブサイトやブログを作成・運営できるプラットフォームとして人気があります。
無料で利用可能
基本的にソフトウェア自体は無料で提供され、オープンソースとして自由にカスタマイズ可能です。
テーマによるデザイン変更
多数の無料・有料テーマがあり、クリックだけでデザインを変更できます。
プラグインによる拡張
50,000以上のプラグインを利用して、機能を簡単に追加可能。例: SEO最適化、フォーム作成、eコマース機能など。
ユーザーフレンドリー
管理画面が直感的で、コードの知識がなくても運営が可能です。
柔軟性とカスタマイズ性
開発者向けにPHPやJavaScriptで自由にカスタマイズ可能。
WordPressのオリジナルテーマを作成することは、ウェブサイトを独自デザインにするための強力な方法です。以下に、基本的な手順を説明します。
- WordPressのインストール
ローカル環境(例: XAMPP、Local by Flywheel)やサーバー上でWordPressをセットアップします。 - テーマフォルダーを作成
- WordPressインストールディレクトリの
wp-content/themes
に移動。 - 新しいフォルダを作成し、名前を付けます(例:
my-custom-theme
)。
- WordPressインストールディレクトリの
- 必須ファイルの作成
作成するテーマの最低限のファイル:style.css
: テーマ情報とCSSスタイルを記述。index.php
: テーマのメインテンプレート。
テーマ情報を含む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
*/
最低限の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>
- WordPress管理画面にログイン。
- 「外観」 > 「テーマ」に移動。
- 作成したテーマを選択して「有効化」。
次のステップでは、必要な機能を追加していきます。
- ヘッダーとフッターの分割
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(); ?> <!-- Main content --> <?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');
- カスタム投稿タイプ:
functions.php
で新しい投稿タイプを作成。 - Advanced Custom Fields(ACF): フィールドを追加してより高度なカスタマイズを可能に。
これで基本的なオリジナルテーマが完成です。テーマのデザインや機能を追加して、自分だけのユニークなWordPressサイトを構築しましょう!