calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

WordPress_Template

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

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

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

メタ/SEOを自動化
1.keywordsとdescriptionを自動出力する
2.タイトルが空のとき、HTML要素を出さない処理
3.canonical/正規URLのみを検索に表示する
4.jQueryや外部 JavaScript の競合を避ける

画像
5.記事中の最初の画像を自動検出して、表示する
6.アイキャッチを自動でリサイズ

コンテンツ
7.タイトル取得後、文字数をカットして、語尾に「…」をつける
8.最初の投稿だけ広告表示
9.一覧ページに記事を抜粋して表示
10.「続きを読む」の前後に文字を入れる
11.前の記事、次の記事 を表示する
12.○○ページだけ違うことする
13.ページによって、レイアウトを変える

サイドバー
14.サイドバーをつくる
15.サイドバーを出す
16.サイドバーを切り替える
17.タグクラウドをドロップダウン、件数を表示

フッター
18.ウィジェット3個追加+フッターに表示する

検索
19.検索機能をもっと使いやすくする

管理画面
20.ビジュアルエディター/ロゴ/ログイン画面

作る
21.ショートコードを作る
22.プラグインを作る

テスト環境
23.XAMPP
24.MAMP
25.nginx

勉強する
26.チートシート
27.テンプレートタグ一覧
28.オリジナルテーマ作成
29.スライド(初心者向け)

メタ/SEOを自動化

1.keywordsとdescriptionを自動出力する

automatically_WP

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

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

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

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

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

3.canonical/正規URLのみを検索に表示する

canonical_WP

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

4.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(); ?>

画像

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

detects_WP

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

6.アイキャッチを自動でリサイズ

Resize_WP

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

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

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

コンテンツ

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

cut_WP

一覧ページなどで、レイアウトを崩したくないときに、文字数を統一して綺麗に表示させるタグです。例えば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>

8.最初の投稿だけ広告表示

Advertising_WP

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

9.一覧ページに記事を抜粋して表示

excerpt_WP

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

10.「続きを読む」の前後に文字を入れる

character_WP

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

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

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

11.前の記事、次の記事 を表示する

previous_WP

通常は以下のタグで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) ?>

12.○○ページだけ違うことする

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

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

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

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

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

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

13.ページによって、レイアウトを変える

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(); ?>>

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

サイドバー

14.サイドバーをつくる

make_sidebar_WP

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

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

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

15.サイドバーを出す

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

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

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

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

16.サイドバーを切り替える

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

dropdown_WP

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

フッター

18.ウィジェット3個追加+フッターに表示する

display_WP

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

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

検索

19.検索機能をもっと使いやすくする

easiersearch_WP

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

管理画面

20.ビジュアルエディター/ロゴ/ログイン画面

Management_WP

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

作る

21.ショートコードを作る

shortcode_WP

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

22.プラグインを作る

makeplugin_WP

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

テスト環境

23.XAMPP

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

24.MAMP

XAMPPのMac版みたいなもの。

25.nginx

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

勉強する

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

26.チートシート

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

27.テンプレートタグ一覧

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

28.オリジナルテーマ作成

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

29.スライド(初心者向け)

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする