新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

WordPress(ワードプレス)でヘッダー部に入るCSSリンクをページごとに変える方法 #wp

      2014/11/09

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

1年以上前の記事です。内容が古い可能性があります。

最近では、「サイト作成」=「CMS導入」=「WordPress対応」という仕事が多くなってきました。
もともと、WordPress(ワードプレス)はブログ用CMSだったのですが、最近のバージョンアップで一般サイトでも十分使える機能が搭載されてきてるんですよね。

ただし、一般的なサイトではトップページとコンテンツページが違うデザインのことが多いのに比べ、
WordPressで作られるテーマ(テンプレートの集まり)の多くはヘッダー、フッター共通のものばかりです。
フッターは、まあいいでしょう。困るのはヘッダーです。
ヘッダーにはデザインを司るのに重要なのはCSS、そのリンクはがあるわけでして、
これをページごとに変えてやることでデザインを変えてあげているという人も結構いるんじゃないでしょうか?

スポンサーリンク
 

今回は、そんなときにどうすればいいのかのお話。
いくつかの方法がありますが自分は何しろ楽な方法を選んでやることにしました。

ちゃんとやろうとしたら以下のサイトが参考になります。
□ WordPressでCSSやJavascriptをページ毎に振り分ける | Webクリエイターネット
こちらでは、「function.php」に関数を用意してしっかりとした振り分けを行なっています。

ただですね。自分はこの方法は使いませんでした。
こちらのブログにも

header.phpで条件分岐させてもよい

と、書かれていますがまさに、この方法をとりました。

具体的には

<?php if( is_home() ) : // トップページの場合 ?>
<link href=”<?php bloginfo(‘url’); ?>/css/top.css” rel=”stylesheet” type=”text/css”>
<?php else : // トップページ以外の場合 ?>
<link href=”<?php bloginfo(‘url’); ?>/css/contents.css” rel=”stylesheet” type=”text/css”>
<?php endif; // 条件分岐終わり ?>

といった表記をheader.phpのCSSを読み込ませている部分に書いてあげればOK。
この場合top.cssがトップページのみのCSS、contents.cssがトップページ以外に対応するCSSになります。
なお、<?php bloginfo(‘url’); ?>に関してはこちらの記事を参照。
WordPress(ワードプレス)テーマで使った画像やJSファイルの場所

つまり、「if( is_home() )」の分岐でトップページのみのCSSを設定して「else」以下をそれ以外としているわけです。
自分の場合、とりあえず、これで十分でした。

via : 【Wordpress】条件分岐とCSSを使ってカテゴリー別や固定ページ別に違う画像を表示させる方法 | bibouroku 

 - CMS, WordPress, デザイン, プログラミング , ,

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
PHPが凄い!!

1年以上前の記事です。内容が古い可能性があります。今まではCGIといえばPerl …

Facebookの「いいね!」ボタンが使えなくなる。自分で設置した人は確認しておこう

1年以上前の記事です。内容が古い可能性があります。Facebookといえば「いい …

リニューアル後のFlickr(フリッカー)でsetのスライドショーを埋め込む方法【その1】

1年以上前の記事です。内容が古い可能性があります。リニューアル後のFlickr( …

さくらのレンタルサーバー+ラピッドSSLを使ってWordPressをhttps化するときの注意点

1年以上前の記事です。内容が古い可能性があります。さくらインターネットで非常に安 …

WordPress(ワードプレス)のリンク切れチェックに「Broken Link Checker」 #wp

1年以上前の記事です。内容が古い可能性があります。表立っての活躍は見せなくても、 …

JPEG画像は新規保存するたびに劣化する(わけじゃない)

1年以上前の記事です。内容が古い可能性があります。JPEGってのはファイル形式で …

no image
最も短いブラウザ判別スクリプト【JavaScript】

1年以上前の記事です。内容が古い可能性があります。コリスさんに最も短い(と思われ …

WordPress(ワードプレス)固定ページからコメント欄を消す方法 #wp

1年以上前の記事です。内容が古い可能性があります。一筋縄ではいかなかった固定ペー …

ライブドアブログ(livedoor Blog)からワードプレス(WordPress)へのブログ移転でリダイレクトをさせる方法

1年以上前の記事です。内容が古い可能性があります。ライブドアブログ(livedo …

ブログのメニューにCSS3の「box-shadow」プロパティでドロップシャドウを付けてみた【Webデザイン】

1年以上前の記事です。内容が古い可能性があります。そろそろCSS3を初めてみよう …

血液型オヤジ