2 years前の投稿 #
はじめまして。
現在Wordpressで画像中心のページを作成しています。
画像のみをスタックアップしていくページを作成していましたが、文章をポストする必要もでてきました。
divで各ポストを括るようにし、floatで横に並べて行くようにしているのですが、画像は幅もいろいろなので、widthは設定していません。そして、文章をポストすると、文章の場合はwidthを設定していないせいで、ゾロゾロと横長のなんとも読みにくいポストになってしまいます…。
そこで質問なのですが、文章をポストする際にのみ、特定のcssタグを追加することはできるのでしょうか？もしくは、文章か画像かを判別してクラスを都度振り分ける事は可能でしょうか？imgタグにcssクラスを設定するのではなく、divタグに各自文章用、画像用のクラスを設定したいのです。
よろしくお願い致します。
divタグに各自文章用、画像用のクラスを設定したい
plan a：
その div が
文章のラッパーなら例えば <div class="text">
画像のラッパーなら例えば <div class="image">
と書きます。
plan b：
div にクラス名（例：post）をつけて、文章を p タグで囲んで style.css で
div.post img{/* お好みのスタイル */}
div.post p{/* お好みのスタイル */}のように指定します。
plan c：
div にクラス名（例：post）をつけて javascript で
jQuery(document).ready( function($) {
$('div.post').each(function(){
if($(this).find('img').size() > 0)
$(this).addClass('image');
else
$(this).addClass('text');
});
});style.css で
div.post.image{/* お好みのスタイル */}
div.post.text{/* お好みのスタイル */}
2 years前の投稿 #
ご返答ありがとうございました。
まさにplan cが実現したいものだったので、ポストをdiv.classで括るようにし、教えていただいたように、ヘッダに記述してみましたが、クラスが追加されません…。記述している場所が悪いのでしょうか？
jqueryファイルはプラグインから読み込んでいるので読み込まれているとは思うのですが…。
my-script.js ファイルを作成して上記 javascript を書いて使用しているテーマフォルダ直下に保存（アップロード）します。
functions.php に以下を追加します。
function my_print_scripts() {
wp_enqueue_script('my-script', get_bloginfo('template_url') . '/my-script.js', array('jquery'));
}
add_action('wp_print_scripts', 'my_print_scripts');以下、念のため。
ポストをdiv.classで括る
div のクラス名を class にした場合は my-script.js, style.css の .post もあわせて .class に変更して下さい。
2 years前の投稿 #
早々にお返事いただいてありがとうございます、数日間これで悩んでいるので本当に本当にありがたいです。
早速教えていただいたように記述してみましたが…
Fatal error: Call to undefined function add_action() in D:\inetpub\vhosts\○○.ca\httpdocs\main\wp-includes\functions.php on line 3644
とでてしまいます…。
もし wp-includes\functions.php に上記コードを追加したなら
それは元に戻して
現在使用しているテーマの functions.php に追加してください。
2 years前の投稿 #
何度もすみません…。本当にありがとうございます。
再度、教えていただいたように、テーマにfunctions.phpを作成しました。
そしてポストをdiv.postで括るよう、
<div class="post">
<?php /*?><a href="<?php the_permalink() ?>"><?php */?>
<?php the_content('Read the rest of this entry »'); ?>
</div>と記述しました。そして教えていただいたようにmy-script.jsを作成してテーマ内にアップロードしました。
ところがダメです…。function.phpをindex.php内に呼び出す必要があるのでしょうか？
初心者で申し訳ないです…。
テーマにfunctions.phpを作成しました
通常 functions.php が無いテーマはほとんど無いので、新規に作成したなら何か間違ってないかな、とちょっと気になります。
ところがダメです
ダメなりに何らかの出力や変化があったらお知らせいただくとアドバイスしやすいです。
function.phpをindex.php内に呼び出す必要
は無いです。
functions.php - ファイル名は複数形なので注意してください。
ちなみに、functions.php に PHP のコードを書く時は <?php ?> で囲む必要があるので
<?php
function my_print_scripts() {
wp_enqueue_script('my-script', get_bloginfo('template_url') . '/my-script.js', array('jquery'));
}
add_action('wp_print_scripts', 'my_print_scripts');
?>と書きます。
2 years前の投稿 #
ありがとうございます。
人に依頼されて作っているのですが、コメント機能やトラックバックなどそういった機能は一切いらない、ただ画像だけのページでと言われて作りましたので、functions.phpは作成しませんでした。
目指すページ：http://www.amazingfuture.co.uk/
このサイトのような表現法で、しかし画像だけ、しかもキャプションもなしで画像にボーダーもなし、といわれていたのですが、やはり文章もポストしたいといわれ今回の問題に当たりました。
教えていただいたように、my-script.jsをテーマ直下に作成し、functions.phpはもちろん<?php ?>でかこって作成しました。index.phpは<div class="post">でかこっていますが、wordpressで自動に行われる<p>は削除するように設定しています。
appearanceでfunctions.phpは確認できています。が、設定してブラウザで確認しても、ソースコードを見ても何の変化も無いのです（<div class="post">コンテンツ</div>のまま）。
説明不足で申し訳ありませんでした。もしアドバイスしていただければ助かります。
ソースコードを見ても
jQuery(javascript) でクラスを追加しているのでソース上は変化は見えないです。
Firefox+Firebug で DOM 要素を調べるとダイナミックな変化がわかって良いです。
javascript でエラーがあるのもよくわかるので重宝します。ぜひお試しください。
■javascript が読み込まれているか確認
ソースに以下の記述があることを確認します。
先に
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
jquery より後のどこかに
<script type='text/javascript' src='http://example.com/wp-content/themes/default/my-script.js?ver=2.9.1'></script>
注）ドメイン，テーマはご使用中のものに読み替えてください。
■どぎついスタイルで確認
style.css
div.post.text{
background-color:red;
border:5px green solid;
}
div.post.image{
background-color:blue;
border:5px magenta solid;
}注）style.css を変更した場合は、ブラウザのキャッシュをクリア後に表示を確認します。［更新］を繰り返しても良いです。
どうにも心が折れてしまったら URL を提示いただくか
晒すのはちょっと、でしたら kz のリンク先のお問い合わせからお知らせいただくか
いっそ kz 用アカウントを作っていただけばなんとかします。
で、解決したら内容をフォーラムに報告していただけば良いです。
2 years前の投稿 #
うまくいきました！！
本当にありがとうございます。
ここ数日これで悩んで不眠状態でしたので、ほんとうに涙です！
ありがとうございました！
解決の決め手をご報告いただくと実り多いフォーラムになりますのでよろしくです。
2 years前の投稿 #
了解です！
<script type='text/javascript' src='http://example.com/wp-content/themes/default/my-script.js?ver=2.9.1'></script>を
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>の前に記述するとのアドバイスを頂いた事を実行し、解決しました。
functions.phpで試した際には、上手く行かなかったのですが、上記の方法で上手く実現したかった自動でクラスを追加することができました。
ヘッダが長くなってしまいましたので、機会があれば教えていただいたfunctions.phpで動作するようにもしてみたいと思います。
本当にありがとうございました。今晩はよく寝られそうです！
ログイン しなければ投稿できません。
