【Wordpress】現在開いているページのナビに任意のクラスをつける

現在いるページのナビにアクティブページ状態と分かりやすくするために
classをつけて、見た目を変えるため、今回はclass="active"をつけたい。

<nav>
  <ul>
    <li>HOME</li>
    <li>SERVICE</li>
    <li>COMPANY</li>
  </ul>
</nav>

トップページにつける場合は

    <li <?php if( is_front_page() && is_home() ) echo ' class="active"'; ?>>HOME</li>
    <li>SERVICE</li>
    <li>COMPANY</li>

でよし。

固定ページの場合はis_page('スラッグ名')←にスラッグ名をいれる

    <li <?php if( is_front_page() && is_home() ) echo ' class="active"'; ?>>HOME</li>
    <li <?php if( is_page('service') ) echo ' class="active"'; ?>>SERVICE</li>
    <li <?php if( is_page('company') ) echo ' class="active"'; ?>>COMPANY</li>

より詳しくは下記サイトへ

参考サイト：WordPress ナビゲーションにカレントをつける方法 - by Takumi Hirashima

自分の頭にもクラスつけたいﾍﾟｶｯ！

【Wordpress】PCとスマホの条件分岐タグ

wp_is_mobile()でPCとスマホを振り分け

htmlで作成したclass（pc,sp）でレスポンシブ対応にしていたが、
wordpressだと条件分岐で解決できる。

まずは、htmlに記述しているclass="pc",class="sp"を削除したのち

<?php if ( wp_is_mobile() ) : ?>
 // スマホ・タブレットで表示させたい内容
<?php else: ?>
 // PCで表示させたい内容
<?php endif; ?>

を記述し、htmlをそれぞれにわける。

wp_is_mobile()はタブレットも含まれるため、タブレットをPCと同じ表示にしたい時は
下記をfunction.phpに記述する

function is_mobile() {
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        '^(?=.*Android)(?=.*Mobile)', // 1.5+ Android
        'dream',           // Pre 1.5 Android
        'CUPCAKE',         // 1.5+ Android
        'blackberry9500',  // Storm
        'blackberry9530',  // Storm
        'blackberry9520',  // Storm v2
        'blackberry9550',  // Storm v2
        'blackberry9800',  // Torch
        'webOS',           // Palm Pre Experimental
        'incognito',       // Other iPhone browser
        'webmate'          // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

参考：WordPressでPCとスマートフォンで表示を切り替える方法【条件分岐タグ】 | Handy Web Design

wordpressってすごいﾍﾟｶｯ

【Wordpress】サイトURLを取得・サイトタイトルを取得

サイトのURLを取得

<?php echo esc_url( home_url( '/' ) ); ?>">

以前使っていた

bloginfo( 'home' )

は使わない

site_url()はwordpressがインストールされている場所を返す

サイトのURLを取得・出力する | The WordPress Press

サイトのタイトルを出力

<?php bloginfo( 'name' ); ?>

なぜサイト名をｐｈｐで出力するのか？
後々サイト名が変わったとき変更が大変だから。

まだまだいけるﾍﾟｶｯ！

htmlからwordpressにする時、最低限変更する箇所【header,footer,home】

head内

<meta charset="UTF-8">

を

<meta charset="<?php bloginfo ('charset'); ?>">

titleタグはfunctions.phpで記述（htmlソース上は削除）

//titleの設定
add_theme_support( 'title-tag' );
function wp_document_title_separator( $separator ) {
  $separator = '|';
  return $separator;
}
add_filter( 'document_title_separator', 'wp_document_title_separator' );
function wp_document_title_parts ( $title ) {
  if ( is_home() || is_front_page() ) {
    unset( $title['tagline'] );
  }
  return $title;
}
add_filter( 'document_title_parts', 'wp_document_title_parts', 10, 1 );

参照：WordPress4.4以降のtitleタグ「wp_get_document_title」使い方 | たったひとりのIT事業部。

/headの前に

<?php wp_head(); ?>

を記述

footer内

/bodyの直前に

<?php wp_footer(); ?>

を記述

コピーライトは下記にする

&copy; 2018 <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?> </a>All Rights Reserved.

home内

画像へのパス（テーマフォルダ内場合）

<img src="img/hoge.jpg>

の場合

<img src="<?php echo get_template_directory_uri(); ?>/img/hoge.jpg>

に変更。

<?php get_header(); ?>
~コンテンツ~
<?php get_footer(); ?>

又追加があったら書くﾍﾟｶ！