質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

8356閲覧

wordpressのカスタム投稿に違うCSSを導入したい

yasuhiro92

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/11/04 07:35

wordpressで「Custom Post Type UI」をつかってカスタム投稿を作りました。

そのカスタム投稿に通常の投稿とは違うCSSを導入したいのですが、うまくいきません。

ネットで検索し、「header.php」の中に、

<?php if(is_singular(plan_list)): ?> <link rel="stylesheet" href="http://..../wp-content/themes/sahifa/style-plan_list.css" type="text/css" media='all' /> <?php else: ?> <link rel="stylesheet" href="http://..../wp-content/themes/sahifa/style.css" type="text/css" media='all' /> <?php endif; ?>

を追加しました。("plan_list"がカスタム投稿名です。)

その結果、該当箇所にはきちんと動作しました。

しかし、header下部に

<link rel='stylesheet' id='tie-ilightbox-skin-css' href='http://..../wp-content/themes/sahifa/css/ilightbox/dark-skin/skin.css' type='text/css' media='all' />

という記述があり、そちらが優先して反映されてしまします。

php内では

<?php wp_head(); ?>

となっている部分なので編集できません。

こちらの記述を正しく直す方法はありますでしょうか?

ちなみに、テーマは「sahifa」です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

WordPressでは、スタイルシートを読みこませる時は、functions.phpのどこかで

PHP

1wp_enqueue_style( $handle, $src, $deps, $ver, $media );

という関数を利用します。
公式テーマであれば、必ずこの方法でスタイルシートが組み込まれているはずです。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_register_style

$depsという引数に、他のCSSの$handleを記述すると、依存関係を表す(=そのCSSが読み込まれた後に読み込むようにする)ことができます。

id='tie-ilightbox-skin-css'
というCSSに依存関係を持たせたいのであれば、$depsに「'tie-lightbox-skin'」を追記する必要があります。
(-cssという末尾の部分は自動で付与されるのでそこは必要ありません)

なので、functions.phpに

※間違いがあったので下に書きなおしました。

と記述すれば解決すると思います。
styleタグを直接記述する方法はWordPressのお作法に反しているため、上手く行かないことの方が多くなりますので、functions.phpに関数を定義する方法で対応を考えることをおすすめします。

PHP

1if (is_singular('plan_list')) { 2wp_enqueue_style('plan-list',読み込ませたい用意したCSSURL, array('tie-style'), false, all); 3}

投稿2015/11/05 02:27

編集2015/11/06 00:33
s104

総合スコア98

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasuhiro92

2015/11/06 00:27

ご回答ありがとうございます。 (質問の中で、style.cssとskin.cssを間違えていました。正しくは、<link rel='stylesheet' id='tie-style-css' href='http://xn--mck0a8dxa4ipb2479ep69c.asia/wp-content/themes/sahifa/style.css' type='text/css' media='all' />でした。申し訳ありません) function.phpの中で、 function tie_register() { wp_register_style( 'tie-style', get_stylesheet_uri() , array(), '', 'all' ); wp_enqueue_style ( 'tie-style' ); と記述されていました。 ご回答いただいたものを記述してもエラーになってしまいました。 この場合どのように記述すれば良いのでしょうか?
s104

2015/11/06 00:32 編集

すみません、どうやらタイポがあったようです。 tie-styleに依存性を持たせたいのであれば、$depsにtie-styleを指定してあげれば良いので、 ※コメント機能にコードがかけないようなので、元回答に追記します。 こうですね。 先の解答では、styleがstlyeと書き間違いになっていました・・・
yasuhiro92

2015/11/06 01:51

add_action( 'wp_enqueue_scripts', 'tie_register' ); function tie_register() { wp_register_style( 'tie-style', get_stylesheet_uri() , array(), '', 'all' ); wp_enqueue_style ( 'tie-style' ); wp_register_style( 'tie-woocommerce', get_template_directory_uri().'/css/woocommerce.css' , array(), '', 'all' ); if (class_exists('Woocommerce')) wp_enqueue_style( 'tie-woocommerce' ); ・ ・ ・ となっている所に if (is_singular('plan_list')); wp_enqueue_style('plan-list',読み込ませたい用意したCSSのURL, array('tie-style'), false, all); を挿入してみましたが、動作しません。 記述の仕方が間違っているのでしょうか...? 度々の質問、申し訳ありませんが、よろしくお願いします。
s104

2015/11/06 01:59

まず一点、「読み込ませたい用意したCSSのURL」と私が書いた部分に、ちゃんとCSSのURLを記述していますか? 私は貴方が読み込ませたいCSSのパスなどは存じ上げないのと、 これぐらいは理解して自分で差し替えるだろうと思いそう書いています。 また、PHPのifの行の末尾が;になっているのはなぜでしょうか?
yasuhiro92

2015/11/06 02:11

すみません。 ifの行の「;」を消すとうまくいきました! ありがとうございます。
s104

2015/11/06 02:13

良かったです。こちらこそ度々ミスとわかりにくい部分があり申し訳ありませんでした。
guest

0

表題の「wordpressのカスタム投稿に違うCSSを導入したい」はクリア出来ている様なので、Wordpressの質問の様で、CSSの問題のようですが大丈夫でしょうか。

<link rel='stylesheet' id='tie-ilightbox-skin-css' href='http://..../wp-content/themes/sahifa/css/ilightbox/dark-skin/skin.css' type='text/css' media='all' /> という記述があり、そちらが優先して反映されてしまします。

タグを見る限り、テーマのCSSが読み込まれている様です。

php内では

<?php wp_head(); ?>

となっている部分なので編集できません。
こちらの記述を正しく直す方法はありますでしょうか?

「正しく直す」の意味が、「そちらが優先して反映されてしまうCSS」より「style-plan_list.css」を優先させたいと言う意味であれば、まず<?php wp_head(); ?>よりも下に

php

1<?php if(is_singular(plan_list)): ?> 2<link rel="stylesheet" href="http://..../wp-content/themes/sahifa/style-plan_list.css" type="text/css" media='all' /> 3<?php else: ?> 4<link rel="stylesheet" href="http://..../wp-content/themes/sahifa/style.css" type="text/css" media='all' /> 5<?php endif; ?>

を書いてください。

これで「style-plan_list.css」が「そちらが優先して反映されてしまうCSS」より後に読み込まれる為「正しく直す」事が出来たと思います。

それでも「style-plan_list.css」の指示が打ち負けてしまう場合は、「そちらが優先して反映されてしまう」CSSよりスタイルの優先順位が低い命令になっていると思います。

その場合は、改めて「CSSの優先順位」についての質問を投げかけると良いかと思います。

投稿2015/11/04 09:13

seiji_maemura

総合スコア129

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasuhiro92

2015/11/06 00:24

ご回答ありがとうございます。 <?php wp_head(); ?> の下に記述することで動きました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問