【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】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がインストールされている場所を返す
サイトのタイトルを出力
<?php bloginfo( 'name' ); ?>
なぜサイト名をphpで出力するのか?
後々サイト名が変わったとき変更が大変だから。
まだまだいけるペカッ!
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(); ?>
を記述
コピーライトは下記にする
© 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(); ?>
又追加があったら書くペカ!