WordPressのテーマ自作(index.php)

WordPressのテーマ自作(index.php)

前回の「WordPressのテーマ作成(テーマの作成、テーマの詳細)」にて、
index.phpとstyle.cssの準備が終わり、テーマの作成ができました。
今回は各パーツとindex.phpを編集していきます。

パーツの準備

/wp-content/themes/sample/内に、
functions.php、header.php、footer.php、sidebar.phpをアップします。

index.phpの編集

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="">
</head>
 
<body>
<header>
ヘッダー
</header>
 
<main>
メインコンテンツ
</main>
 
<aside>
サイドバー
</aside>
 
<footer>
フッター
</footer>
 
</body>
</html>

ここまではいつも通りの、htmlでの記述です。

WordPressではfunctions.phpで「関数ファイル」を置くことができます。
また、テンプレートタグを記載することで、値を取得できます。

テンプレートタグを入れたindex.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>
<?php get_header(); ?>

<main>
メインコンテンツ
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>
 
</body>
</html>

テンプレートタグ

タイトル

ブログのタイトルが表示されます。

<?php bloginfo('name'); ?>

ディスクリプション

ダッシュボードの「設定」>「一般設定」で入力したキャッチフレーズが表示されます。

<?php bloginfo('description'); ?>

サイトURL

サイトのトップページのURLを取得。
末尾に「/」が付かないので、「/」を入れます。

<?php $url = home_url('/'); ?>

テーマのディレクトリ

サイトのトップページのURLを取得。

<?php echo get_template_directory_uri(); ?>

画像を読み込む場合
<img src="<?php echo get_template_directory_uri(); ?>/images/01.jpg" alt="">

style.css

<?php echo get_stylesheet_uri(); ?>

ヘッダー

<?php get_header(); ?>

サイドバー

<?php get_sidebar(); ?>

フッター

<?php get_footer(); ?>

他にもあるよ。関連記事

人気記事

人気記事

最新記事

ブログカテゴリー

タグ

プロフィール

プロフィール画像

猫田 ねこ

パチンコ店勤務からweb制作会社へ転職という異色の経歴。漫画大好き。アニメ大好き。パチンコ大好きな、ねこです。

利用規約  お問い合わせ

ページトップへ