WordPress初心者のちょいと便利メモ 2

WordPress初心者の知っていれば
ちょいと便利な備忘録メモ。
前回はショートコード等に触れましたが、
今回はWordPressサイトを構築していて参考になった時のメモです。

まず、いつもの通り
WordPressサイトを作るにあたり
静的なhtmlファイルをphpファイルに分割していきます。
それからテンプレートダグを組み込んでいくのですが、
下層ページを固定ページ化するにあたり
ちょっとした問題が・・・。

  • 固定ページの投稿にPタグが入りスタイルが崩れる・・・。
  • 固定ページの投稿にテンプレートダグが使えないので、
    画像パスに「get_template_directory_uri();」などが使えない。パスを貼り替えていくの面倒くさいな〜・・・。
  • 下層ページそれぞれのwrapperに設定したシグネチャーを
    page.phpに反映
    させ、静的サイトで作ったcssをそのまま適用させたい。

これらの問題はWordPressでサイトを
作り慣れた方には朝飯前な事かもしれませんが、
初心者にとっては、ちょっとした障害物になります。
そこで、この3点の解決策をメモしてみました。

Pタグの削除

以下のコードをfunctions.phpに書きます。

remove_filter('the_content', 'wpautop');
remove_filter('the_excerpt', 'wpautop');

以上。簡単ですね。

関数リファレンス

ただ、これだと投稿記事全体に適用されてしまいますので、
特定の固定ページ等にだけ適用したい場合は
そのテンプレートファイルに直接書くのもありです。
方法は簡単。
「the_content();」「the_excerpt();」の前に書くだけ。

<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content(); ?>

投稿の画像パス

これも以下のコードをfunctions.phpに書きこむだけ。

function imagepassshort($arg) {
$content = str_replace('"images/', '"' . get_bloginfo('template_directory') . '/images/', $arg);
return $content;
}
add_action('the_content', 'imagepassshort');

※images/は任意のフォルダパス

参考にさせて頂いたページ
http://takayakondo.com/images-pass-theme-directory/

cssの方は、画像パスをSassの変数で管理していたら一発解決ですよね。

スラッグからIDの取得

これはphpのbasename関数にテンプレートタグのget_permalink()を使って
bodyタグにidを付与することでページシグネチャを実現しています。
そして、ついでにclassも付加。

<?php $slug = basename(get_permalink()); ?>
<body id="<?php echo $slug ?>" <?php body_class(); ?>>

関数リファレンス

以上3点の解決策ですが、
他に、phpとは関係ないところでは、
フォーム部分をコンタクトフォーム7化した時に
submitボタンの画像は、text-indentで文字を飛ばして
backgroundで指定するなど
CSS側で大体解決できました。

最後に、初心者のwp化でちょっと気をつけたいのが、
静的なhtmlファイルでは、CDNなどで直接jQueryを読み込んでいると思うのですが、
wp化の際はWordPressに組み込まれたjQueryを使用しないと、
出力されたhtmlで二重に使用されコンフリクトする恐れがあるので注意です。

それでは、どうするかというと、
wp_head();の前にwp_enqueue_script()関数を挿入、
もしくはfunctions.phpに記述します。

詳しくはwp_enqueue_script()関数とjqueryで検索すると
実装方法を丁寧に紹介してあるページが沢山ヒットしますので、
そちらをご参照ください。

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

関数リファレンス

SNSでもご購読できます。