初心者でも簡単！WordPressテンプレートやテーマ作成に必須な２９

作成：2013/07/8
WordPress >

自分だけのテーマを作りたい、最初から知っておけば、重いプラグインだらけにならずに済んだテンプレートタグやカスタマイズ方法。

WordPressでテーマをいじる時に、「これ、最初から知っておきたかったな」とか「プラグインなんかいらなかったなぁ～」と思えたテンプレートタグやファイルなどをメモ。

これからWordPressでもカスタマイズしてみるか！という人のために、自分の復習もかねてご紹介します。

エンジニア速報は Twitter の@commteで配信しています。

メタ／SEOを自動化

１．keywordsとdescriptionを自動出力する

記事が膨大になった時に、一つ一つdescriptionやキーワードなんて書いてられません。以下は、コンテンツの冒頭から文字だけを抽出し、descriptionとキーワードを自動で割り当てることが出来る非常に便利な方法です。「content_summary, 0, 60」の60は出力させたい文字数。これでSEO系のプラグインを一つ減らせます。

WordPressでエントリーごとにkeywordsとdescriptionを自動で設置する方法 « Blog × Play Under World

２．タイトルが空のとき、HTML要素を出さない処理

タイトルをもとにh1などを出力する場合、タイトルが空であるときにh1を出さないようにする処理。

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

この書き方をすることで、タイトルが空である時にh1を出さないように出来ます。

３．canonical／正規URLのみを検索に表示する

今や必須となっている「canonicalタグ」も、タグで出力してみます。title直後に記載してOK。今回は高速化のためにもプラグインを使わない方向なのでAll in One SEO Packはインストールしません。

canonical urlは完璧ですか？SEO friendlyなWordPressサイトには絶対必要です。｜ウェブシュフ

４．jQueryや外部 JavaScript の競合を避ける

通常は

<scripttype="text/javascript"src="/js/jquery.js"></script>

ですが、「wp_enqueue_script」を使うと、ほかのプラグインと競合せずに、jsやjQueryファイルを読み込むことができます。header.phpに記入する場合、の前に書きます。

jQueryの場合はハンドルのみで指定可能です。

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>

スクリプトの場合は以下

<?php
wp_enqueue_script(
'function', //スクリプトの識別名
get_template_directory_uri() . '/js/function.js', //スクリプトへのパス
array( 'jquery' ) //ライブラリ
); ?>
<?php wp_head(); ?>

wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話 | マイペースクリエイターの覚え書き

画像

５．記事中の最初の画像を自動検出して、表示する

意外とアイキャッチ設定は面倒です。アイキャッチを設定しなくても、記事の中で使われているサムネイル画像を自動で探しだし、表示させることができます。

やりたかったあの機能を実現する、WordPress 中級者必見のカスタマイズ6個 | gerenuk.crazyphoto.org/

６．アイキャッチを自動でリサイズ

アイキャッチ設定と指定の大きさで自動リサイズする

<?php the_post_thumbnail(array(100,100)); ?>

を使う方法、(100,100)は縦横の大きさです。詳しい設定方法は以下。

アイキャッチ画像を表示させる方法 | WordPressカスタム

コンテンツ

７．タイトル取得後、文字数をカットして、語尾に「…」をつける

一覧ページなどで、レイアウトを崩したくないときに、文字数を統一して綺麗に表示させるタグです。例えばH2にタイトルを表示させて任意の文字数でカットするには

<?php echo mb_substr($post->post_title, 0, 32).'...'; ?>

をh2などではさみます。さらにリンクをつけるとこんな感じ。

<h2><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_title, 0, 32).'...'; ?></a></h2>

８．最初の投稿だけ広告表示

特定の記事の下にだけ広告などを表示する方法。色々なブログのトップページでみかけますよね。もちろん、何番目の記事の下に挿入するか調節できます。

WordPressでトップページの記事の間に広告を表示する方法 | NANOKAMO BLOG

９．一覧ページに記事を抜粋して表示

WordPressに同梱されているプラグイン「wp-multibyte-patch」を直接編集する方法が簡単です。

WordPressタグ　the_excerpt() の文字数を制御 | WordPress なら最高！

１０．「続きを読む」の前後に文字を入れる

続きを読む（を入れたところ）の前後に文字を入れる場合はこれです。

<?php the_content('○○' . the_title('', '', false). '△△'); ?>

「○○『記事のタイトル名』△△」と表示されます。

１１．前の記事、次の記事　を表示する

通常は以下のタグでOK。同カテゴリ内で表示したい時は「false」を「true」に変更します。

<?php previous_post_link('&laquo; 前の記事：%link', '%title'); ?>
<?php next_post_link('%link：次の記事 &raquo;', '%title', false) ?>

htmlタグを入れると以下。

<?php previous_post_link('<div class=""alignleft prev"">&laquo; 前の記事：%link', '%title</div>'); ?>
<?php next_post_link('<div class=""alignright next"">%link：次の記事 &raquo;</div>', '%title', false) ?>

１２．○○ページだけ違うことする

もし、○○だったら△△する。みたいなことを条件分岐と言います。

<?php
if (条件):
// ここに「条件にたいする処理」を書きます。
endif;
?>

「endif」は条件分岐が終わる合図です。メインページだけ何か「違うことしたい」ときは

<?php if(is_home()): ?>
// メインページの時に出力したいことを書く
<?php endif; ?>

特定のカテゴリページだけ何か「違うことしたい」ときは

<?php if(is_category()): ?>
// カテゴリページの時に出力したいことを書く
<?php endif; ?>

条件分岐タグ - WordPress Codex 日本語版

１３．ページによって、レイアウトを変える

body_classというタグを使うと、body要素にclass属性を付与することが出来ます。例えば、表示しているページによってカラム数や色を変えたり。以下のようなclassがつきます。

フロントページ／home
ホームページ／blog
アーカイブ／archive
検索結果／search
メディア／attachment
カテゴリ／category
タグ／tag
固定ページ／page

上を見ると、トップページにhomeというクラスが付くので、トップページのフッターだけ背景を赤にしたい場合は、cssに下のように記入すればトップページのフッターだけレイアウトを変えたりできます。

/* トップページのとき、背景色をグレー色に */
.home { background-color: #e6e6e6;}
/* 個別記事のとき、フォントサイズを120%に */
.single{ font-size:120%;}

あとは＜body＞を以下に置き換えるだけです。

<body <?php body_class(); ?>>

テンプレートタグ/body class - WordPress Codex 日本語版

実際に自作テーマを作ったときに、手っ取り早くレスポンシブ対応にしたかったので、以下のサイトを参考にさせていただきました。CSSに少しだけ書き足すだけなので簡単！

レスポンシブWebデザインの作り方（簡単設定方法） | フリーランスWebデザイナーの仕事

サイドバー

１４．サイドバーをつくる

functions.phpという空のファイルを作り、以下の一行を記入してみましょう。

<?php register_sidebar(array('name' => 'SidebarA')); ?>

そうすると、管理画面の「外観」にウィジェットが出現します。これでウィジェットを管理画面で操作出来るようになります。が、これだけではページにサイドバーは現れません。

１５．サイドバーを出す

ページにサイドバーを出すには、この一行が必要なんですね。

<?php dynamic_sidebar('SidebarA'); ?>

任意の場所に入れてみましょう。sidebar.phpを作ってなければindex.phpでもOK!

※ウィジェットに何も登録してないと、デフォルトか何も表示されません。

１６．サイドバーを切り替える

ブログだけじゃなくて、会社HPで情報ページや商品ページなど、サイドバーのコンテンツを切り替える必要がある時に参考。

WordPress のページによってサイドバーを切り替える方法 | ウェブル

カテゴリーのように、タグのドロップダウン表示させる方法。

[WordPress] タグクラウドをドロップダウン＆タグの使用件数を表示 | ラクイシロク

フッター

１８．ウィジェット３個追加＋フッターに表示する

少し古い記事ですが、検証したところ、WordPress 3.5.2でもちゃんと動きました。この記事に書いてあるコードをfunctions.phpに追加して、以下のコードをフッター領域に書き足せば、表示されます。

<?php dynamic_sidebar('subfooterleft'); ?>
<?php dynamic_sidebar('subfootercenter'); ?>
<?php dynamic_sidebar('subfooterright'); ?>

WordPressウィジェットをフッターに表示する方法 | 本質思考道場

検索

１９．検索機能をもっと使いやすくする

｢入力した検索ワード｣と｢該当件数｣を表示。検索結果から固定ページとカスタム投稿ページを除外する方法など。

WordPressの検索機能をもっと使いやすくする | Webクリエイターボックス

管理画面

２０．ビジュアルエディター／ロゴ／ログイン画面

functions.phpをいじれば、ビジュアルエディターすらカスタマイズできます。

作る

２１．ショートコードを作る

ショートコードとは記事に直接記入できる、テンプレートタグみたいなもんです。記事の途中に関連記事を出す方法なんかもあります。

２２．プラグインを作る

プラグインを作るのって、簡単な内容であれば、初心者さんでも５分くらいで出来ちゃいます。こちらは最も分かりやすいスライドです。

WordPressプラグイン作成入門

テスト環境

２３．XAMPP

WordPressを本番環境で反映したくない、まずは自分のPCだけでテストしてみたいという人はこちらをどうぞ。

『最新版』XAMPP上にWordPressを簡単インストール | WordPress初心者の部屋〜使い方を知っとこ！

２４．MAMP

XAMPPのMac版みたいなもの。

MAMPのインストール for Mac-独学!未経験からWebデザイナーになる!!

２５．nginx

リバースプロキシのロシア製サーバ、エンジンエックス。とにかく早いということで、余力がある人はお試しを。

ngnixをローカル環境のwindows7にインストールする方法を図解付きで解説。XAMPPとの併用も。 - YATのBLOG

勉強する

全てのテンプレートタグとか、カスタマイズ法などとても全部は載せきれないので、後はチートシートやスライド・サイトなど色々載っけておきますので、これで勉強しましょう～。

２６．チートシート

チートシートは印刷して、硬質カードケースなどに入れておくと捗ります。

２７．テンプレートタグ一覧

こういうテンプレートタグがあるんだなと覚えておくだけで、カスタマイズが随分楽になります。

２８．オリジナルテーマ作成

テーマの作り方。サンプル付きで分かりやすいもの中心。

２９．スライド（初心者向け）

以上、初心者でも出来る、WordPressテンプレートやテーマを作るときに便利なまとめでした。

スポンサードリンク