WordPressテーマ作成
シンプルなブログテーマの作り方。
必要なファイルはindex.php
とstyle.css
の2つ。
テーマの名前はとりあえず「myblog」で。
/* Theme Name: myblog */ @charset "utf-8";
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>myblog</title> </head> <body> </body> </html>
各ページでヘッダーとフッターを使いまわせるようにindex.php
をheader.php
とfooter.php
に分けます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <title><?php the_title(); ?></title> <?php wp_head(); ?> </head> <body>
<?php wp_footer() ?> </body> </html>
<?php get_header(); ?> <!-- サイトの内容 --> <?php get_footer(); ?>
これで準備完了。
投稿を表示させよう
index.php
内に以下のコードをコピペしてください。
<?php if ( have_posts() ) : ?> <?php while( have_posts() ) : the_post(); ?> <span><?php the_time('Y年n月j日'); ?></span> <h2><?php the_title(); ?></h2> <p><?php the_content(); ?></p> <hr> <?php endwhile;?> <?php endif; ?>
完成
index.php
<?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while( have_posts() ) : the_post(); ?> <time><?php the_time('Y年n月j日'); ?></time> <h2><?php the_title(); ?></h2> <p><?php the_content(); ?></p> <hr> <?php endwhile;?> <?php endif; ?> <?php get_footer(); ?>
header.php
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <title><?php the_title(); ?></title> <?php wp_head(); ?> </head> <body> <header style="text-align: center;"> <h1><?php bloginfo( 'name' ); ?></h1> <p><?php bloginfo( 'description' ); ?></p> </header>
footer.php
<footer style="text-align: center;"> <small> 2021 @ <?php bloginfo( 'name' ); ?> </small> </footer> <?php wp_footer() ?> </body> </html>
style.css
/* Theme Name: myblog */ @charset "utf-8"; html { max-width: 100vw; } body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; max-width: 100vw; width: 720px; padding: 0 12px; margin: 0 auto; } a { color: #06f; } a:hover { opacity: 0.7; } img { max-width: 100%; height: auto; -webkit-backface-visibility: hidden; } .flex { display: flex; justify-content: space-between; align-items: center; } nav a { margin: 0 8px; }
備考
cssフォルダにsanitize.cssを入れて、header.phpから読み込んでます。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/sanitize.css">
以上でWordPressで簡単なブログサイトのテーマを作成してみました。
これ以外に
- トップページ
- 記事一覧
- アーカイブ
- 個別ページ
- 404ページ
- 個別記事ページ
など色々作っていくともっと凝ったブログを作ることも可能。
その他の基本
リンク
<a href="<?php echo home_url(); ?>">
固定ページへのリンク
<a href="<?php echo home_url(); ?>/スラッグ名">
画像のパス
<img src="<?php echo get_template_directory_uri(); ?>/images/headline_01.png">
header.phpの読み込み
<?php get_header(); ?>
<?php get_sidebar(); ?>
footer.phpの読み込み
<?php get_footer(); ?>
プラグインが正しく動作するために
<?php wp_footer(); ?> </body>
ログイン時に上部に管理バーが表示されない場合はwp_footerが抜けている時が多い。