WordPressでページごとに読み込むcssを変更する方法

key-wp_read

WordPressで構築されたサイトの更新を依頼されました。
固定ページの更新だったので、固定ページを複製したものを修正してサンプルとして見てもらうことにしました。

複製して、元のページ名にアンダーバーを足したページ名(例:元「info」→サンプル「_info」)を指定したところ、cssが反映されません。

どうやら修正したcss以外のものが読み込まれているみたいです。
header.phpを見たら、if文でページごとに読み込むcssを変えてしていました。

なので、サンプル用に複製した「_info」ページもif文追加する必要があります。
if(is_page(‘info’))と書く方法は知っていたのですが、if(is_page(array(‘info’,’company’)))で複数指定することができるんですね!
http://ドメイン名/infoまたはhttp://ドメイン名/companyだった場合、条件に合うという意味です。

既存のheader.phpが下記のようになっているところに、複製した「_info」ページにもinfo.cssが読み込まれるようにするためには、if(is_page(array(‘info’,’company’)))の部分をif(is_page(array(‘info’,’company’,’_info’)))に修正します。

既存のheader.php

<?php
if(is_page(array('info','company'))){
?>
    <link type="text/css" rel="stylesheet" href="/css/info.css">
<?php
}elseif(is_page('contact')){
?>
    <link type="text/css" rel="stylesheet" href="/css/contact.css">
<?php
}else{
?>
    <link type="text/css" rel="stylesheet" href="/css/common.css">
<?php
}
?>

修正したheader.php

<?php
if(is_page(array('info','company','_info'))){
?>
    <link type="text/css" rel="stylesheet" href="/css/info.css">
<?php
}elseif(is_page('contact')){
?>
    <link type="text/css" rel="stylesheet" href="/css/contact.css">
<?php
}else{
?>
    <link type="text/css" rel="stylesheet" href="/css/common.css">
<?php
}
?>

if文がわかれば簡単ですね!

ページごとに読み込むsidebarを変更する方法

指定のcssが読み込まれたのでホッとしたのもつかの間、よく見るとサイドが既存のinfoページと異なります。
何故?

最初どこで指定しているのかわからなかったので探していたら、page.phpに記載がありました。
よく考えたら固定ページはpage.phpで読み込んでいますもんね。

サイドもページごとに読み込むsidebarをif文で変更することができるの知らなかったです。
if文の指定方法もcssと同じでif(is_page(array(‘info’,’company’)))の部分をif(is_page(array(‘info’,’company’,’_info’)))に修正します。

get_template_part( ‘sidebar’, ‘info’ );を指定することで、sidebar_info.phpが読み込まれます。

<h4>既存のpage.php</h4>
<?php
if(is_page(array('info','company'))){
    get_template_part( 'sidebar', 'info' );
}elseif(is_page('contact')){
    get_template_part( 'sidebar', 'contact' );
}
?>

<h4>修正したpage.php</h4>
<?php
if(is_page(array('info','company','_info'))){
    get_template_part( 'sidebar', 'info' );
}elseif(is_page('contact')){
    get_template_part( 'sidebar', 'contact' );
}
?>

他の方が書いたソース程勉強になるものはないです!

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad