第1回 WordPressでSEO/SEMを考えたテンプレートを作ろう。「基本構造」 | ITオフィスサポートとシステム開発|システムガーディアン AWSクラウド導入|東京都中央区八丁堀

ITサポート出張、ITシステム開発・保守をワンストップで|AWSクラウド|東京都中央区八丁堀

ITオフィスサポートとシステム開発|システムガーディアン AWSクラウド導入|東京都中央区八丁堀

電話でのお問い合わせ

第1回 WordPressでSEO/SEMを考えたテンプレートを作ろう。「基本構造」

   

お世話になります。加藤です。
気が付くともう9月も半ば。
今年も3ヶ月ちょいしか無いと思うと本当に恐ろしいです。

加藤登志典
加藤
一応会社の代表
元デザイナーで現在スクリプトやらプログラム系
秋葉原のジャンク通りでパーツ捕獲が趣味。
必殺技:何でもLEDを組み込む自作

9月に入り自社の商品やコンテンツで色々をサイトを制作したり、お客様よりSEO業務できる?と依頼もされるのですが、どうしてもWordPress既存のテーマやカスタム専用テーマのBonesや既にあるテンプレートをカスタマイズしたりすることが多いです。折角ならプログラムからの出力メインで組み込んで、オリジナルのSEOに適したテーマを作って実際に制作記録を連載してみよう!…という事で何気に連載して記事を書いてみます。先に書いておきますが、この連載はあくまで初心者向けですが、ある程度PHPの変数やLAMP構築理解出来る人向け。それに加えて実際に私が作りながらなので、多少不備あるかもです。極力分かりやすく書いていきますが分からない事あれば、気楽にお問い合わせくださいませ。

 

因みに全部で7回を予定しています。
今回は基礎部分。

先に結論から言うと、検索エンジンに対応した構造に

SEO・SEMに優れたってテンプレートってなんぞ?と思われるかも知れませんので、先にざっくりと結論から書いておきます。各コンテンツを見出しなどキッチリと管理表示させて各SNSとの連携、ランキングやRSSの引き込み。そして検索エンジンへXML出力で明確なサイトマップ登録。
またシェアが増えてきているスマートフォンへの対応。この辺がテンプレート行える最低限のSEO対策でしょうか。

 

特にWordPressは構造上自動でテーマを呼び込んでくれますが、CSSや各テンプレートパーツに分岐で書くと、煩雑になるので、適した場所に配置して不必要なパーツはフックしない(呼び込まない)のが良いですね。あ、ちなみにこのシステムガーディアンもその内 直します。えぇ…。

 

まぁ、何れにしても構築時にコンテンツ構造をどうするか?というのが、結構大切だと、私は考えています。当然細かい事はありますが、基本の柱ですものね。

早速WpordPressを用意して基本のファイルを設置

では、実際にWordPressをサーバーに設置して組んでいきます。基本のテーマファイルの場所にまずは基本のファイルを設置していきます。まずは公式からダウンロードして、サーバに設置します。余談になりますが、DreamweaverやNetBeansなど、使ってるエディタもFTPや作業フォルダも、この時にさくさく作業できるようにこちらも設定しましょう。

 

特にPHP言語は他の言語と違いコンパイル時にデバッグというのが無いので、PHPの設定でエラー出力やコード書いてる時にエラーに気づかせてくれないと、
ドツボのハマる事が多いです(私的に)さて、設置ができた所で、早速基本のオリジナルテーマを作ります。

テーマ自体の作成はインストールしたフォルダ内のwp-content/themes/ にフォルダを作ります。

 

まずは基本のファイルを設置します。最低限2つファイルを作り、style.cssの中身に情報を書けばテンプレートとして認識されます。
index.php
style.css

wordpress テンプレート作成style.cssの中身は

上記を文字コード UTF-8でアップすればOKです。
今回、社内でLinuxの記事やHOWTOがあるので、それをコンテンツ予定。

コンテンツを設計する

今回、社内でLinuxの記事やHOWTOがあるので、それをコンテンツ予定です。ファイル作る前に大まかにコンテンツをザックリ考えてテーマを作っていきます。で、先程index.php とstyle.cssをアップロードしても画面は白い状態です。必要な情報を入れながら作っていきます。

 

固定ページにLinuxのディストリビューション情報をガンガン入れいきます。固定ページにはCentOSやサーバー構築、投稿にはコマンド関係とLinuxのニュースをタグ分け、トップページには外部のRSSの引き込みを行います。そうなると構造もうっすら決まってきます。

 

まずは基本のindex.php

ここにコードを書いていきます。最初から機能を説明していいですが、まずは基本コードを分解し、それを機能と共に分解して配置して行きます。コードを見てると気づくと思いますが、デフォルトでは <meta charset=”<?php bloginfo( ‘charset’ ); ?>”>など、

 

確かに動的で便利ですが、もう決め打ちで書き込んでいくのが楽です。またget_template_part()を使いまわしていくのが主流らしいので、それに合わせます。

<?php get_template_part( ‘content’,’info’ ) ?>
とすれば、contents-info.php
<?php get_template_part( ‘content’,’single’ ) ?>
とすれば、contents-single.phpが読み込まれます。元々single.phpは投稿ページでpage.phpは固定ページという決まりがありますので、それに従って分解して行きます。つまり各部分を分解してWordPressの構造に合わせて行きます。何言ってるか分からないッという人もいるので図にしてみるとこんな感じです。
wordpress テンプレート作成

実際に基本ページを作る

さて、基本が分かった所で、ここから実際にシンプルな状態を作っていきます。

本来はページ自体を最適化して分解しますが、ここでは本当に基本のHTMLの構造を分解して行きます。

先程の件で、index.phpを

と記述。
呼びこむパーツには、

…と簡単にこれだけです。
さて、これだけでは何もないので、ヘッダーを作りメニュー表示します。
メニューといってもページリストですね。

bodyから上を抜き出してheader.phpとして、記述します。

これだけではメニューもナビもないので、メニューをまずは表示します。

次に、index.phpにheader.phpを呼び込みます。

これで、メニューの表示ができました。
次にフッターを同じように分けます。
これは、footer.php として、同じように分岐して、
更に最近のサイトはフッターにもメニューを出しておきます。

こちらもindex.phpに同じように呼び込んで起きます。

これで基本の構造ができました。

ここにバンバン加工を加えていきます。
まだ必要なページやレイアウトやSEO対策がまだですからね。
次回は、レイアウトを作りながら、SEO対策を行っていきます。
ではでは

 - WordPress, 加藤, 日常

  関連記事

中央区 茅場町 pali kari
中央区 茅場町 pali kari

茅場町近くの路地を曲がった隠れ家的な場所に。 雰囲気がよくておすすめです。 トマトのピクルスとバケット、スライスしてのっけて食べればヘルシー! トマトの甘味とビ …

SIP asterisk 不正
アタックNo1☆SIPサーバーへの攻撃の考察

涙が出ちゃう。 お世話になります。代表の加藤です。 日々打ち合わせや制作で、奔走しています。 ところで、法人化してからやはり会社という事で、社内はグループフォン …

ns
掛け時計が来ました!

こんにちは。スタッフTでございます。 世の中はシルバーウィークだというのに、連日の雨で気分も滅入ってしまいますね。   システムガーディアンもそろそろ …

清水土地イメージ01
シミックス上京日記  会社はどこだ?

こんにちは。滋賀から上京して現在社宅でルームシェア中の清水ことシミックスです。 先日は秋葉原のアオキでスーツを買いましたよ。 人物紹介:シミックス清水 経済学部 …

僕がデザイナーを辞めた理由
僕がデザイナーを辞めた理由

お世話になります。代表の加藤です。 おかげ様で4月の法人化から体制が整って参りました。スタッフからもっと顔を出せよ代表だろ?と言われて今月から露出度アップを狙い …

nakamata_s
中央区八丁堀中俣酒造 はらぺこ日記

今日はお酒とお魚自慢な中俣へ。 かなり有名ではないでしょうか。 食べログで4.0の評価は伊達じゃないです。 そして、とにかくここのお店は新鮮。 だからうまい! …

IE表示確認
IE標準 搭載の開発者ツールで表示仕方をチェック

WEBサイトを作ってると誰もが言う悩ましい問題。 それはブラウザ毎の表示の違い。 特にIE こと、インターネットエクスプローラーはCSS3に対応まだまだだったり …

クラウド,データベース
サバゲー サバイバルゲームフィールド ASOBIBA初体験!

こんにちは! スポーツの秋やってきましたね! リオオリンピックが終わり、リオパラリンピックが始まりました。 ランニング大好きなのでこれから本格的にランナートレー …

0001
新人SEへの初歩的なアドバイス

そろそろ夏も終わりで黄昏を始めました。 こんばんはカトウです。(コレを書いてる時間は夜12時です) それは兎も角、昨今の人不足の中、臨時で、PG業務もSE業務も …

田中良茂 氏
田中良茂氏 ベートーヴェン ピアノ連続演奏会 後援/協賛

2015年6月7日(日)東京オペラシティ・リサイタルホール 田中良茂 氏 ピアノ リサイタル ベートーヴェン ピアノ・ソナタ 連続演奏会に システムガーディアン …

トップページ