Q&A
「cssを操作してもcssが適用されない」というのはどこのCSSでしょうか。静的ファイルに記載したものでしょうか、WordPressのテンプレートフォルダのものでしょうか。「記事が２重で表示される 」出力部分のPHPを記載ください。
いつも皆様にお世話になっております。
私の初歩的過ぎる質問にお答えいただき本当に感謝しております。
今回の質問なのですが、この前の質問に続くのですが、
説明させていただきます。
以下以前の質問です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
現在、HTMLで作ったサイトをWordpressに切り替える作業をしております。
やりたいことは、HTMLとCSSで作ったものの一部にWordpressを使って
口コミを３件ほど、ページ下部分に付けるというものです。
（口コミは普通の投稿したものを使います）
Wordpressは初めてでして、
Wordpress トップページ index.htmlなどと検索してみたのですが
なかなか理解できず作業が止まったままなのです。
一つ
http://www.jiriki.co.jp/blog/wordpress/wordpress-indexhtml
こちらのサイト様を参考に作ったのですが、
WordPress側の設定をしようのところの時点で、TOP PAGEという項目が出てこず
なかなか進めていません。
お手数なのですが、初心者の私にもできそうなやり方はありますでしょうか？
ご回答いただければ幸いです。
よろしくお願いします。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
この前の回答してくださった方のおかげで、無事設置することが
できました。
今作業しているサイトはここに載せることができないのですが、
以下の点でなかなか進めないでいます。
○ http://www.jiriki.co.jp/blog/wordpress/wordpress-indexhtml
のサイト様のやり方で読み込むがcssを操作してもcssが適用されない。
→cssを組み込む方法がありますでしょうか？何か別に方法があるでしょうか？
○ 記事が２重で表示される
→こちらもjavascriptの書き方で変更方法がありますでしょうか？
この２点で行き詰っています。
自分でも、いろいろ考えて、javascriptでcssを変更できないかいろいろ
調べたのですが、なかなか理解できず今回お力を借りたいと思っております。
大変申し訳ありません。
ご回答いただければ幸いです。
よろしくお願いします。
追記です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
cssを変更したい部分ですが、
http://www.jiriki.co.jp/blog/wordpress/wordpress-indexhtml
上記のサイト様の
index.htmlにWordpressの新着を表示する場合の部分の
<script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load("feeds", "1"); //APIを読み込みます function initialize(){ var feed = new google.feeds.Feed("http://www.jiriki.co.jp/blog/feed"); var noPhoto = ("<img src='img/logo-dark.png' />"); feed.setNumEntries(3); feed.load(dispfeed); function dispfeed(result){ if(!result.error){ var container = document.getElementById("feed"); for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; var entryDate = new Date(entry.publishedDate); var entryYear = entryDate.getYear(); if (entryYear < 2000){ entryYear += 1900; } var entryMonth = entryDate.getMonth() + 1; if (entryMonth < 10) { entryMonth = "0" + entryMonth; } var entryDay = entryDate.getDate(); if (entryDay < 10) { entryDay = "0" + entryDay; } var date = entryYear + "/" + entryMonth + "/" + entryDay; var entryImg = ""; var imgCheck = entry.content.match(/(src="http:)[\S]+((\.jpg)|(\.JPG)|(\.jpeg)|(\.JPEG)|(\.gif)|(\.GIF)|(\.png)|(\.PNG))/); if(imgCheck){ entryImg += '<img ' + imgCheck[0] + '" width=\"200px\">'; } else { entryImg += noPhoto; } container.innerHTML += '<div class=\"3col\"><p class=\"sub alt-font\">' + date + '</p><h3><a href="' + entry.link + '">' + entry.title + '</a></h3>' + entryImg + '<p>' + entry.contentSnippet.substring(0,120) + '<br><a href="' + entry.link + '" class=\"link-text\">Read more</a></p><hr></div>'; } } } } google.setOnLoadCallback(initialize); </script> <p id="feed"></p>
の中の
container.innerHTML += '<div class=\"3col\"><p class=\"sub alt-font\">' + date + '</p><h3><a href="' + entry.link + '">' + entry.title + '</a></h3>' + entryImg + '<p>' + entry.contentSnippet.substring(0,120) + '<br><a href="' + entry.link + '" class=\"link-text\">Read more</a></p><hr></div>';
の部分であるclass="3col"の中をcssを適応したいと思っています。
またPHPですが、
<?php /* Template Name: Top Page */ readfile(ABSPATH . '/index.html'); ?>になります。
初心者で、情報がうまく伝えきれていないところがあり、
申し訳ございません。
こんにちは。cssですが、
こちらのサイト様
http://www.jiriki.co.jp/blog/wordpress/wordpress-indexhtml
のjavascriptが適応された時の3colというclassが作られた部分です。
この3colにcssを適用したいのですが、何度もやったのですが、
適応されませんでした。
情報が少なく申し訳ありません。PHPの部分は後ほど載せます。
「何度もやったのですが」の部分を聞いています。どこのファイルのどの部分をどうしようとしてどうなったかをお書きいただけないでしょうか。
何度も申し訳ございません。静的ファイルに記載したものになります。静的ファイルにjavascriptで表示された3colのclassの部分にcssを静的ファイルのcssに入力したのですが、適応されませんでした。
すみません。先ほど追記したはずのものが消えていたので、今からのせます。お手数おかけします。
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、CSSをどのように変更したいのか、それに対してどうアプローチしているかも追記ください。
回答2件
0
1 cssが適用されない
cssが適用されない原因はいくつか考えられますが主に
・cssファイルが読み込めていない
・cssのセレクタの指定が間違っている
・cssが適用されているが、他のcssの指定によって上書きされている
あたりになるかと思います。
chromeのデベロッパーツール等を使うとこの辺りが確認できると思いますので「chrome デベロッパーツール 使い方」あたりで検索して確認してみるのがいいかと思います。
2 記事が２重で表示される
質問文のJavaScriptのコードですがこれはmarshmallowさんのサイト内に記載したコードではなく、参考サイトのコードをコピペしていませんか？
そうであれば実際に動作させているコードが間違っているかどうかを確認することができませんので、実際のコードをコピペした上でURL等隠したい情報の部分を書き換えるようにしたほうが良いと思います。
考えれる可能性としては
1 JavaScriptが2回動作している
2 そもそもRSSが2重になっている
3 htmlに直接書かれている(又はWPが書き出している）
あたりでしょうか・・・とりあえず
JavaScript
1var container = document.getElementById("feed"); 2container.innerHTML = ''; //#feedの中身を空にする
として#feedの中身を空にしてから追加するようにしてみて2重が解消されるようならJavaScriptが原因で間違いないかと思います。(※これは解決策ではなく原因を探るための手段です。)
投稿2016/06/13 04:58
退会済みユーザー
総合スコア0
この度はご回答ありがとうございました！
とても丁寧でわかりやすく、初心者の私でもできました。
本当に感謝しております。
またお世話になるかもしれませんが宜しくお願いします。
0
ベストアンサー
wordpressのcssやjavascript,jQueryや各種cdnで読み込むようなものは、wp_enqueue_style()、あるいはwp_enqueue_script()で行います。
何故このようなことをするのかは、例えばjQueryで書いた何かしらのスクリプト(仮にA.js)を読み込む際に、jQueryを使って書いたA.jsを読み込むより前にjQueryの読み込みは完了していないといけません。
つまりA.jsはjQueryに依存しているということになります。
こういった依存関係を上手く処理してくれるのがwp_enqueue_style()やwp_enqueue_script等です。これらは条件によって、解除することもできます。
例を上げると、ローカルのjQueryを読み込むのではなく、GoogleのCDNから読み込みたいなどですね。この場合はwordpressが自前で持っているjQueryを一旦解除して、新たにGoogleのCDNからjQueryを読み込ませます。
例えば、ここでCDNが落ちていたりしてCDNから読み込めなかった場合のフォールバックなどとしてローカルのjQueryを読み込んだり、管理画面以外はCDNのjQuery、管理画面はwordpress自前のjQueryなどと条件をつけて読み込んだり解除することができます。
cssにしてもそうです。例えばbootstrapを使いたいと思っても先にbootstrapが読み込めてなかったらそれを子テーマ等で上書きして独自にカスタマイズすることはできません。
もちろんhead.php等に書いておいても動作はしますが、wordpress的にそれは非推奨です。ここらはcodexにも書いてあるので、他の説明サイトとあわせて読まれることをオススメします。
まず、wp_enqueue_style()等を利用して、メインとなるstyle.cssを登録したりして読み込ませます。wordpressのカスタマイズは基本子テーマへというのが普通なので、子テーマのstyle.css等も読み込めるようにします。
親テーマの style.css
子テーマの style.css
この順番で読めば、同じセレクタのプロパティがあった時に子テーマの方が優先されるという具合です。これらは依存関係があって、親テーマのstyle.cssが読み込まれたら子テーマのstyle.cssを読み込むというようにしておきます。そうすれば必ず親のstyle.cssよりも後で子のstyle.cssが読み込まれるという具合です。
新着の件については、例えば表示される記事のどこかに投稿日時がはいっていたら、それをjQueryで拾って今日現在の日付と比較して、新着を表示したりは簡単にできますよ。PHPでやるよりも柔軟にできます。
質問の意味と状況が何となしにわかったので追記。
質問のスクリプトが入っているよりも前の部分で、
<style> .3col { //任意のスタイル } </style>
とするだけじゃないですかね？
あるいは、
container.innerHTML += '<div class=\"3col\" style=\"何かしらのスタイル\">
とするか。まぁ前者が簡単ですね。
投稿2016/06/13 04:47
編集2016/06/13 05:42
総合スコア366
To: hidekichiさん
横から失礼します。
質問者さんは前回の質問で、ちょっと特殊なWordPressの使い方をされているため、今回の質問部分のテンプレートには wp_head() がありません。
【HTML - ワードプレスでHTMLファイルをトップページにするやり方(37427)｜teratail】
https://teratail.com/questions/37427
下記を参考にされています。
【WordPressでトップページを静的サイトに index.htmlを共存させる簡単なやりかた - Blog | 東京 岡山 ホームページ制作・WEBコンサルジュ ウェブサイト制作のLLC JIRIKI】
http://www.jiriki.co.jp/blog/wordpress/wordpress-indexhtml
イマイチリンクからだと状況がわからないのですが、teratailの質問の方では固定ページでトップページを作られたわけですよね？それとwp_head()がない理由がよくわからないんですけれども。
タイトルタグとか、メタとかも無しと言うことですか？
> タイトルタグとか、メタとかも
すべて静的ファイルから呼んでいると思います。下記部分がインデックスを表示するためのテンプレートの全てだと思います。
<?php
/*
Template Name: Top Page
*/
readfile(ABSPATH . '/index.html');
?>
↑<html>から</html>まで「ABSPATH . '/index.html'」のものを出力しているだけだと思います。
なるほど、完全別物なわけですね。
んじゃ静的なファイルの方に、
<?php require './wp/wp-blog-header.php'; ?>
等としてヘッダを読みこませればいいんじゃないですかね？
そしたら基本wordpressの機能は使えると思うんですが。
wp-load.phpも必要かな・・・というか、こちらが必要かな。
.htaccessをいじくったら、べつにindex.htmlでもphpは動く思うんですが。
けどここまでするのであれば、index.htmlにする意味がないですね。
（書き換えました）
あ、本来ならindex用のテンプレートを普通に作るのが良いと思います。
wp-load.phpはテンプレート呼び出し（及び描画）までWordPressで行っているので不要です。
> index.htmlにする意味がない
多分ですが、現在のサイトをなるべく触らずに、徐々にWordPressに置き換えたいということではないかと想像しています。
いえいえ、つい脊髄反射して答えてしまったので、こちらこそ失礼しました。
ただ思うんですよ、キャッシュとか設定してあったら、静的なページとwordpressの通常の固定ページでのトップとで何か違う部分があるのか、そのメリットは何なのかイマイチ判断が付きません。
名前がindex.htmlになるぐらい？ですかね
まぁプラグインで、StaticPressってのがありますから、普通にwordpressで作って、静的ページで公開するのが簡単なんですけどね。
htmlなのでphpで操作するものは全滅になるので、コメントなどはDisqusとかになるかと思いますが。
皆様、ご回答ありがとうございます。順に読んでおりますのでお待ちくださいませ。
大変感謝しております！
この度はご回答ありがとうございました！
とても丁寧にご回答いただき、初心者の私でもやることができました。
またお世話になるかもしれませんがその際は宜しくお願いします。
本当にありがとうございました！
あなたの回答
tips
プレビュー
