PROGRAMMING

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


Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

Warning: preg_replace(): No ending delimiter '/' found in /home/sho200/simablog.net/public_html/wp-content/themes/jin/functions.php on line 384

もんしょー(@sima199407)です。

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

今回の流れ

・single.phpの作成

・page.phpの作成

・metaデータ作成

・ページのカスタマイズ

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

single.phpの作成

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

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

single.phpcontentsの下

CSSの作成

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

style.css

スマホ用CSSの作成

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

style.css

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

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

page.phpの作成

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

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

page.php 

メタデータの作成

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

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

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

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

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

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

header.phpheadタグ内 

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

また、page.phpsingle.phpmetaデータを登録しておきましょう。

header.php

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

SNS設定

header.phpheadタグ 

metaデータのサンプル

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

header.phpheadタグ内 

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

後日修正する予定

ページのカスタマイズ

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

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

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

404.php 

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

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

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

完成版

DEMO

WordPressで実績を作るには?

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

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

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

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

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

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

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

自作してみての感想

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

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

※WordPressで稼ぎたい方へ

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

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