前回の続きです。
####新しいテーマの追加
WordPressの管理画面を開き、左側のメニューから外観を選択します。
デフォルトで3つのテーマが入っていることがわかります。今はTwenty Twentyというテーマが有効になっています。
ここに新しいテーマを追加するわけですが、その前にWordPressのテーマがどこにあるのかを確認していきます。
Localの画面を開き、赤枠の中の「>」を選択します。
するとmysiteディレクトリが開くので、app/public/wp-content/themesに移動します。
themesディレクトリの中に先ほどの3つのWordPressテーマがあるのがわかります。
themesディレクトリに新しいディレクトリを作成します。名前は好きに決めてください。本記事ではwp-sampleとします。
WordPressがテーマとして認識するには、最低でも2つのファイルが必要になります。index.phpとstyle.cssです。
実際に2つのファイルを作りましょう。中身は空のままで大丈夫です。
作ったらWordPressの管理画面を更新しましょう。
これで新しいテーマが追加されました。
テーマの詳細を確認すると、バージョン情報がなく、作成者が匿名になっています。
有効化を選択し、サイトを表示させてみましょう。まだ何もコードを記述していないので、真っ白な画面が現れます。
これで一応テーマの作成は完了です。
####テーマの概要
style.cssにコードを追加します。
@charset "utf-8";
/*
theme Name: WordPressオリジナルテーマ
Author: Takahashi Takuya
version: 1.0.0
Description: original theme
*/
cssファイルの保存後、管理画面を更新し、自分の作成したテーマを確認します。
テーマ名、作成者名、バージョン、テーマの説明が表示できました。
####テンプレートの作成
作成するファイルは以下の通りです。
- style.css
- functions.php
- header.php
- footer.php
- index.php
- single.php
- sidebar.php
各ファイルに記述するコードを見ていきましょう。
@charset "utf-8";
/*
theme Name: WordPressオリジナルテーマ
Author: Takahashi Takuya
version: 1.0.0
Description: original theme
*/
/*cssのリセット*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
border: 0;
outline: 0;
background: transparent;
}
body {
line-height: 1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
background: transparent;
}
ins {
text-decoration: none;
color: #000;
background-color: #ff9;
}
mark {
font-weight: bold;
font-style: italic;
color: #000;
background-color: #ff9;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
cursor: help;
border-bottom: 1px dotted;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
hr {
display: block;
height: 1px;
margin: 1em 0;
padding: 0;
border: 0;
border-top: 1px solid #ccc;
}
/*サイト全体*/
html {
font-size: 16px;
}
body {
/*フォントの指定*/
font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
/*行間の指定*/
line-height: 1.4;
margin: 0;
padding: 0;
/*サイトのデフォルトとなる文字色*/
color: #333;
}
/*見出しを全て太字で表示*/
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
color: #000;
}
img {
max-width: 100%;
height: auto;
}
デフォルトの文字色や行間はお好みで設定してください。
<?php
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-thumbnails' );
functions.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(); ?>">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<div class="header-inner">
</div>
</header>
<footer id="footer" class="footer">
<div class="footer-inner">
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
footer.phpには、header.phpに記述したbodyとhtmlの閉じタグを忘れずに書いておきましょう。
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
</div>
</aside>
<?php get_header(); ?>
<div class="container">
<div class="contents">
</div><!--end contents-->
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
index.phpは一覧ページを生成するためのファイルです。
<?php get_header(); ?>
<div class="container">
<div class="contents">
</div>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
single.phpは投稿ページを生成するためのファイルです。
これでサイトのひな型が出来上がりました。
現時点では、ブラウザを確認しても真っ白な画面が表示されるだけです。
次回以降、要素を入れていきますので、そのときにきちんと表示されるようになります。
次回はサイトのレイアウトを作成します。