web開発

WordPressで自作テーマをサクッと作ってみる【その3】

  /

もんしょー（@sima199407）です。

３回に渡って投稿してきました、自作テーマの作成の回ラストになります。

【前回までの記事】

１回目：WordPressで自作テーマをサクッと作ってみる【その1】

２回目：WordPressで自作テーマをサクッと作ってみる【その2】

今回の流れ

・single.phpの作成

・page.phpの作成

・metaデータ作成

・ページのカスタマイズ

早速続きから書いていきましょう。

single.phpの作成

single.phpは記事の詳細ページを作成するところになります。

ここが一番ユーザーにとって大切なところともいえます。

single.phpのcontentsの下


<div class="contents">
<?php if(have_posts()): the_post(); ?>　<!--メインループ開始-->
<article <?php post_class( 'kiji' ); ?>>
<!--投稿日・著者を表示-->
<div class="kiji-info">
<!--投稿日を取得-->
<span class="kiji-date">
<i class="fas fa-pencil-alt"></i>
<time
datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<!--カテゴリ取得-->
<?php if(has_category() ): ?>
<span class="cat-data">
<?php echo get_the_category_list( ' ' ); ?>
</span>
<?php endif; ?>
</div>
<!--タイトル-->
<h1><?php the_title(); ?></h1>
<!--アイキャッチ取得-->
<?php if( has_post_thumbnail() ): ?>
<div class="kiji-img">
<?php the_post_thumbnail( 'large' ); ?> <!--the_post_thumbnail()はサイズを指定する-->
</div>
<?php endif; ?>
<!--本文取得-->
<?php the_content(); ?>
<!--タグ-->
<div class="kiji-tag">
<?php the_tags('<ul><li>タグ： </li><li>','</li><li>','</li></ul>'
); ?>
</div>
</article>
<?php endif; ?><!--メインループ終了-->

CSSの作成

PCのスタイルシートを追加します

style.css

.kiji {

font-size: 1em;

margin: 0;

padding: 0 25px 25px;

}

.kiji-info .cat-data a {

text-decoration: none;

color: #fff;

}

.kiji-info .cat-data a:hover {

opacity: .8;

}

.kiji-img {

max-width: 640px;

margin: 30px auto;

text-align: center;

}

/*タグ*/

.kiji-tag {

text-align: right;

}

.kiji-tag ul {

list-style: none;

}

.kiji-tag li {

display: inline-block;

color: #464646;

}

.kiji-tag li a {

font-size: .8em;

margin-right: 7px;

padding: 2px 7px;

text-decoration: none;

color: #464646;

border: solid 1px #464646;

border-radius: 2px;

}

.kiji-tag li a:hover {

opacity: .8;

}

.kiji p {

margin-top: 0;

margin-bottom: 30px;

}

.kiji h1 {

font-size: 1.7em;

margin: .3em 0;

}

.kiji h2 {

font-size: 1.5em;

margin-top: 3em;

margin-bottom: 1.5em;

padding: .4em 0;

border-bottom: solid 5px #464646;

}

.kiji h3 {

font-size: 1.35em;

margin-top: 2.5em;

margin-bottom: 1.5em;

padding: 0 .5em;

border-left: solid 5px #777777;

background: transparent;

}

.kiji h4 {

font-size: 1.2em;

margin: 0 0 .3em;

}

.kiji h5 {

font-size: 1.1em;

margin: 0 0 .3em;

}

スマホ用CSSの作成

スマホ用も追加しましょう

style.css

@media (max-width: 599px) {

.kiji {

font-size: 92%;

padding: 0 10px 25px;

}

.kiji h1 {

font-size: 1.3em;

}

.kiji h2 {

font-size: 1.25em;

}

.kiji h3 {

font-size: 1.2em;

}

.kiji h3:after {

display: none;

}

.kiji h4 {

font-size: 1.15em;

}

.kiji h5 {

font-size: 1.1em;

}

}

PCと共通する部分もあるかと思いますので、上記のようにします。

デザインは好みで変更してください。

page.phpの作成

page.phpは固定ページと言われるもので、

ほとんど、single.php(投稿ページ)と同じものになります。

page.php 

~

<div class="contents">

<!--記事本文-->

<?php if(have_posts()): the_post(); ?>

<article <?php post_class( 'kiji' ); ?>>

<!--タイトル-->

<h1><?php the_title(); ?></h1>

<!--本文取得-->

<?php the_content(); ?>

</article>

<?php endif; ?>

</div>

~

メタデータの作成

メタデータの中でも大事なのは「noindex」です。

よく、noindexとnofollowの違いがわからなくなるのでここでおさらいしておきましょう。

noindex : 検索エンジン(Yahoo,Google)の検索結果に表示しないけど、Googleのクローラー(サイトの評価の審判ロボット)は評価対象にする。

nofollow : 検索エンジン(Yahoo,Google)の検索結果に表示しないし、Googleのクローラー(サイトの評価の審判ロボット)は評価しない。

noflollowのほうがより強力なイメージですね。

今回、noindexにしたいものを選択し、header.phpに追加します

header.phpのheadタグ内 

<?php if(is_tag() || is_date() || is_search() || is_category() || is_404()) : ?>

<meta name="robots" content="noindex"/>

<?php endif; ?>

</head>

mataタグ内に”robots”というネームにしておけばオッケーです。

また、page.phpとsingle.phpのmetaデータを登録しておきましょう。

header.php

<!--個別ページ用のmetaデータ-->

<?php if( is_single() || is_page() ): ?>

<meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>" />

<?php if ( has_tag() ): ?>

<?php $tags = get_the_tags();

$kwds = array();

foreach($tags as $tag){

$kwds[] = $tag->name;

} ?>

<meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">

<?php endif; ?>

<?php else: ?>/*個別ページ以外のメタデータに続く*/

～

<?php else: ?><!--個別ページ以外のメタデータ(TOPページ・記事一覧ページなど)-->

<meta name="description" content="<?php bloginfo( 'description' ); ?>">

<?php $allcats = get_categories();

$kwds = array();

foreach($allcats as $allcat) {

$kwds[] = $allcat->name;

} ?>

<meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">

<?php endif; ?>

～

「get_the_excerpt() 」でdescriptionに抜粋欄に記述した文字列を呼び出し。

SNS設定

header.phpのheadタグ 

<head prefix="og: http://ogp.me/ns#">

metaデータのサンプル

少々難しいので、サンプルとして書いておきます。

header.phpのheadタグ内 

<!-- noindex -->

<?php if(is_tag() || is_date() || is_search() || is_category() || is_404()) : ?>

<meta name="robots" content="noindex"/>

<?php endif; ?>

<!--個別ページ用のmetaデータ-->

<?php if( is_single() || is_page() ): ?>

<meta name="description" content="<?php echo strip_tags( get_the_excerpt() ); ?>" />

<?php if ( has_tag() ): ?>

<?php $tags = get_the_tags();

$kwds = array();

foreach($tags as $tag){

$kwds[] = $tag->name;

} ?>

<meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">

<?php endif; ?>

<meta property="og:type" content="article">

<meta property="og:title" content="<?php the_title(); ?>">

<meta property="og:url" content="<?php the_permalink(); ?>">

<meta property="og:description" content="<?php echo strip_tags( get_the_excerpt() ); ?>">

<?php if( has_post_thumbnail() ): ?>

<?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); ?>

<meta property="og:image" content="<?php echo $postthumb[0]; ?>">

<?php endif; ?>

<?php else: ?><!--個別ページ以外のメタデータ(TOPページ・記事一覧ページなど)-->

<meta name="description" content="<?php bloginfo( 'description' ); ?>">

<?php $allcats = get_categories();

$kwds = array();

foreach($allcats as $allcat) {

$kwds[] = $allcat->name;

} ?>

<meta name="keywords" content="<?php echo implode( ',',$kwds ); ?>">

<!-- twitter OGP -->

<meta name="twitter:description" content="<?php echo strip_tags( get_the_excerpt() ); ?>">

<?php if( has_post_thumbnail() ): ?>

<?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' ); ?>

<meta name="twitter:image:src" content="<?php echo $postthumb[0]; ?>">

<?php endif; ?>

<?php endif; ?>

<meta property="og:site_name" content="<?php bloginfo( 'name' ); ?>">

<meta property="og:locale" content="ja_JP">

<!-- twitter -->

<meta name="twitter:site" content="@sima199407">

<meta name="twitter:card" content="summary">

<meta name="twitter:creator" content="@sima199407">

<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/webclipicon.png" />

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" />

</head>

とりあえずここまでできれば一応オッケーです。

※後日修正する予定

ページのカスタマイズ

前回までに使ったページ以外にもWordPressが用意しているページがいくつかあります。

今回はページエラーの404を使ったページを作成していきます。

「404.php」というファイルを作成し、以下のように編集します。

404.php 

<?php get_header(); ?>

<div class="container">

<div class="contents">

<h2>

ページが見つかりませんでした

</h2>

</div>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

index.phpとほぼ同じですね。

contents内の記述を変えただけです。

これで、作成していないページのURLを叩けば404.phpが出力されます。

完成版

DEMO

WordPressで実績を作るには？

WordPressでの仕事ために実績を作りたいなら自作のテーマを作るのがいいということで、

作成してみましたが、途中で結構疲れてきて解説が雑になっていることをご了承ください。笑

それでも形になったことがとりあえずオッケーかなと。

実務で学んだほうが効率的かも

一番いいのは、実務の中で学んでいくことかなと思います。

派遣案件ならHTML,CSS,jQureyくらいを使えればできるものもありますので、探してみるのが良さそうです。

あわせて読みたい
新卒を捨てた私が派遣エンジニアを選んだ理由【おすすめエージェント紹介】こんにちは。エンジニアのもんしょー（@sima199407）です。 私はフリーランスエンジニアとして活動していますが、以前は派遣エ...

自作してみての感想

ブログ書いている人もなんとなく使っているひともいるかと思いますが、

ウラ側を知るためにもWordPressをやってみるのはいいかもしれない。

※WordPressで稼ぎたい方へ

コードライフというプログラミングサービスでして実用的な方法を提供しております。

運営者のマナブさんのブログにWordPressについても書かれているので、ぜひチェックしてみてください。

プログラミング

読まれてます新卒を捨てた私が派遣エンジニアを選んだ理由【おすすめエージェント紹介】

読まれてます【スクール出身者が選んだ】オススメのプログラミングスクールまとめ
Rated Articles