きまぐれ引きこもりんご80%

WordPress初心者の便利メモ 2

web制作

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

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

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

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

これらの問題は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点の解決策ですが、
他にも、フォーム部分をコンタクトフォーム7化した時にsubmitボタンをtext-indentで飛ばしてbackgroundで画像指定するなどCSS側で大体解決できました。

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

この解決策としてはwp_head();の前にwp_enqueue_script();を挿入、もしくはfunctions.phpに記述します。
詳しくはwp_enqueue_script()関数とjqueryで検索すると実装方法を丁寧に紹介してあるページが沢山ヒットしますので、そちらをご参照ください。

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

関数リファレンス