SNSをチェック

【自作サイト制作入門01】ワードプレスですぐに使えるコード紹介します(とりあえず、コピペでもOK)

ワードプレスをこれから始める人は、いきなりPHPなどと言われても難しいと思います。
まずは、お持ちのFTPサーバーに今から紹介するファイルを作成してください。
※実際には、style.cssファイルも必要になります。別の記事にて詳細にお伝えします。

具体的な参考コードを紹介します。これらのコードは、ワードプレスのテーマ作成やカスタマイズ時に役立ちます。

1. index.php:テーマのメインテンプレートファイル

index.php は、ワードプレステーマのメインテンプレートファイルであり、投稿ページやアーカイブページなど、様々なページの表示に使われます。以下はシンプルな index.php の例です。

<?php get_header(); ?>

<div class="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post-content">
<?php the_content(); ?>
</div>
<?php
endwhile;
else :
?>
<p>投稿が見つかりませんでした。</p>
<?php
endif;
?>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

このコードでは、get_header() 関数を使って header.php を呼び出し、get_footer()footer.php を呼び出しています。また、have_posts()the_post() を使って投稿ループを作り、投稿があればそのタイトルと内容を表示します。

2. header.php:サイトのヘッダー部分を表示するテンプレートファイル

header.php は、サイトのヘッダー部分を管理するテンプレートファイルです。このファイルには、主にナビゲーションメニューやサイトロゴなどが含まれます。以下はシンプルな header.php の例です。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?> - <?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="site-header">
<h1><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
</div>
<nav class="site-navigation">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
));
?>
</nav>
</header>

このコードでは、wp_head() 関数でテーマのヘッダーを出力し、wp_nav_menu() 関数を使ってナビゲーションメニューを表示しています。

3. footer.php:サイトのフッター部分を表示するテンプレートファイル

footer.php は、サイトのフッター部分を管理するテンプレートファイルです。フッターには、サイトの著作権情報やウィジェットエリアなどが含まれることが一般的です。以下はシンプルな footer.php の例です。

 <footer>
<div class="site-footer">
<p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
</div>
<?php wp_footer(); ?>
</footer>
</body>
</html>

このコードでは、wp_footer() 関数でフッターのスクリプトや追加要素を出力しています。date('Y') を使って現在の年を自動的に表示するようにしています。

4. functions.php:テーマの機能を拡張するためのファイル

functions.php は、テーマのカスタム機能を追加するためのファイルです。例えば、ナビゲーションメニューやウィジェットエリアの登録などが行えます。以下はシンプルな functions.php の例です。

?php
function my_theme_setup() {
// ナビゲーションメニューをサポート
register_nav_menus(array(
'primary' => __('Primary Menu', 'mytheme'),
));

// サイドバーウィジェットエリアの登録
register_sidebar(array(
'name' => __('Sidebar', 'mytheme'),
'id' => 'sidebar-1',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));

// サポートするテーマ機能
add_theme_support('post-thumbnails');
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_theme_setup');

このコードでは、register_nav_menus() を使ってナビゲーションメニューをサポートし、register_sidebar() でウィジェットエリアを登録しています。また、add_theme_support() を使ってアイキャッチ画像(サムネイル)やタイトルタグのサポートを有効にしています。


これらのコードを参考に、ワードプレステーマの構造を理解し、自分のサイトに合ったカスタマイズを行ってみてください。テーマの作成やカスタマイズには、PHPの基本的な知識とワードプレスのテンプレートシステムの理解が欠かせませんが、このガイドがその一助となることを願っています。

【自作サイト制作入門02】WordPressで使う style.css の基本と具体的なコード例 【自作サイト制作入門01】ワードプレスですぐに使えるコード紹介します(とりあえず、コピペでもOK) 【自作サイト制作入門00】ワードプレスでページ作成に必要なPHPの基礎知識と実践

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です