HTMLからWordPressテーマへの変換

php
CopyEdit
 get_header(); ?>

 get_footer(); ?>

これにより、ヘッダーとフッターが共通化され、WordPressの管理画面から変更可能になります。

4. header.php と footer.php の作成

header.phpにはHTMLのタグとサイトのナビゲーション部分を配置します。footer.phpにはサイトのフッター部分を配置します。これらのファイルは、WordPressテーマ内のすべてのページで共通の部分となり、再利用が可能です。

例えば、header.phpには以下のように記載します：

php
CopyEdit

 language_attributes(); ?>>

    "">
    "viewport" content="width=device-width, initial-scale=1.0">
    
     wp_head(); ?>

 body_class(); ?>>

    

footer.phpには以下のように記載します：

php
CopyEdit

 wp_footer(); ?>

5. functions.php の作成

WordPressテーマでは、functions.phpファイルを使用してテーマの機能を追加します。このファイルには、テーマのスタイルシートやJavaScriptの読み込み、ウィジェットエリアの設定、メニュー設定などを定義します。

例えば、スタイルシートとJavaScriptを読み込むためには以下のコードをfunctions.phpに追加します：

php
CopyEdit

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/custom.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

さらに、WordPressのメニュー機能を有効にするために、以下のコードを追加します：

php
CopyEdit
function register_my_menu() {
    register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');

6. レスポンシブデザインの実装

HTMLテンプレートにレスポンシブデザインを組み込むためには、CSSメディアクエリを使用します。例えば、以下のようにCSSを追加することで、異なる画面サイズに対応できます：

css
CopyEdit
@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }
    nav {
        display: block;
    }
}

これにより、モバイルデバイスでの表示が最適化されます。

7. コメント機能の実装

WordPressでは、コメント機能は重要な要素です。comments.phpファイルを作成して、コメントの表示部分を設定します。例えば、以下のコードでコメントリストを表示できます：

php
CopyEdit
 if ( have_comments() ) : ?>
    

         wp_list_comments(); ?>
    
 endif; ?>

 comment_form(); ?>

8. 検索機能の実装

WordPressにはデフォルトで検索機能が組み込まれており、searchform.phpファイルを作成して検索フォームを表示します。以下のコードを使って検索フォームを追加します：

php
CopyEdit
"search" method="get" action="">
    "search" value="" name="s">
    "submit" value="検索">

9. 完成したテーマの動作確認

最後に、すべてのファイルを適切に配置し、WordPressテーマディレクトリにアップロードします。その後、管理画面からテーマを有効化し、サイトが正しく表示されるか、コメント機能や検索機能が正常に動作するかを確認します。

このプロセスを経て、静的HTMLテンプレートをWordPressテーマに変換することができます。レスポンシブデザインを意識し、ユーザーの体験を向上させるために、メディアクエリを使用してスマートフォンやタブレットでも快適に閲覧できるように調整しましょう。また、コメント機能や検索機能、カスタムウィジェットを活用することで、WordPressらしい動的なコンテンツを提供できます。