wordpress-wp2

怠けたい人必見！短い手間で実装できるWordPress小技テクを福岡一詳しく解説します。

WPはプラグインを導入してしまえばほとんどの機能が実現できますが、プラグインを導入することで不具合を起こしたり、英語のインターフェイスでわかりにくかったりします。なのでそんなときに実際の現場でよく使われ、短い手間で実装できるコードをご紹介します。このコードを元にあなたのサイトにあったカスタマイズをしてください！

カスタムメニューの設置

カスタムメニューは管理画面から簡単にメニューの追加・編集ができます。functions.phpにも記述が必要なので、テーマフォルダ内にない場合は新規作成してください。
function.php

add_theme_support( 'menus' );

表示したいPHP

<?php wp_nav_menu(); ?>

複数のカスタムメニューがある場合は、メニュー名を指定します。

<?php wp_nav_menu( array('menu' => 'side_nav' )); ?>

そのほか、様々なオプションも設定できますので下記をご覧ください。

テンプレートタグ/wp nav menu – WordPress Codex 日本語版

デバイスによってコンテンツ変える

モバイル端末からアクセスされた場合、CSSのdisplay:none; 等を使って非表示させる場合やJavascriptで非表示させるもありますがWordPressでは専用のテンプレートタグが用意されています。

<?php if ( wp_is_mobile() ) : ?>
  モバイル用のコンテンツ
<?php else: ?>
  PC用のコンテンツ
<?php endif; ?>

3. 画像を挿入する際、P タグで囲まないようにする

投稿やページにおいてエディタから画像を挿入すると、自動的に img タグが p タグに囲まれてしまい意図しない構文になってしまいます。

<p>kochirano ra-men mite!</p>
<p><img src="ra-mem-img1.jpg" alt="" width="300" height="300"></p>
<p>oishisoudessho!</p>

functions.phpに下記のコードを追加することで避けれます。

function remove_ptag_img($content){
   return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'remove_ptag_img');

新着記事には「NEW」と表示

$days       = 7 ; // ← NEWを表示させる期間の日数を入力
$today      = date_i18n('U');
$post_time  = get_the_time('U');
$total_time = date('U',($today - $post_time)) / 86400 ;
$news_icon 　= "";
if ($days > $total_time) {
    $news_icon = ' <span class="color_R">NEW</span>';
}
echo $news_icon;

body タグにカテゴリースラッグのクラスを追加する

function add_cate_name_single($classes) {
  if (is_single() ) {
    global $post;
    foreach((get_the_category($post->ID)) as $cate) {
      $classes[] = $category->category_nicename;
    }
  }
  return $classes;
}
add_filter('body_class','add_cate_name_single');

Related articles