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

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

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

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2460閲覧

WordPressで投稿の画像に対してdivで囲み、枚数に応じてレイアウトを変えたいです。

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2016/04/01 11:28

WordPressサイトを制作中です。

投稿画面で文章や画像を入れていきます。
通常、画像をビジュアルエディターから入れると、

<img src="" alt=""> <img src="" alt="">

このような感じのソースが吐き出されると思いますが、これを画像の枚数によって異なるクラスで内包しレイアウトを変えたいのですが可能なのでしょうか?

「ビジュアルエディターから画像を入力。画像群はdivで覆い、連続して入力された画像の枚数に応じて異なるクラス名を付ける」

例えば、

  • 画像を2枚連続で入力した場合
<div class="2枚用のクラス"> <img src="" alt=""> <img src="" alt=""> </div>
  • 画像を3枚連続で入力した場合
<div class="3枚用のクラス"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div>

このように画像を連続で入力した枚数によって異なるクラスを付けたdiv要素で内包したいです。

「ソースエディタからやればいいじゃん」という声もあるかと思いますが、素人でも更新できるような方式にしたいです。

WordPressでもPHPでもjQueryでもどれでも良いのですが、「画像はdivで覆い、連続して入力された画像の枚数に応じて異なるクラス名を付ける」というのが実現できたら嬉しいです。

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

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

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

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

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

guest

回答2

0

wordpressでの実現方法はわかりませんが、
PHPなら
・DBから読み込んだimgの数を判定して、divにclassを付与
javascriptなら
・imgを囲むdivにidを付与しておき、idで選択したdiv内のimg数をカウントしてdivにclassを追加
で実現できると思います。

投稿2016/04/01 11:47

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2016/04/01 11:52

ご回答誠にありがとうございます。 二通りのやり方を挙げて頂きありがとうございます。 javascriptの場合の まずidをしてそれから枚数判定というロジックは考えつかなかったです!試してみます。
guest

0

ベストアンサー

出力内容をフックして画像が続く部分を正規表現で置き換えをするのが早いかもしれません。

また、Custom Field Suite や Advanced Custom Fields などのプラグインを使用し「画像を入れるための項目」を用意することでも“素人に更新”という用件をクリアできると思います。リッチエディタは名前の通りリッチなのですが、できることが多いぶん混乱される方もおられるので・・・。

投稿2016/04/01 11:45

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2016/04/01 11:51

ご回答誠にありがとうございますm(__)m 正規表現の置き換えですね!苦手な部分ですが調べてみます。
kei344

2016/04/01 12:34

正規表現だけでは「何枚」はカウントできない(私が知らないだけかも)ので、preg_match_allで全部取得してしまって、結果をそれぞれ substr_count( '<img', 結果 ) みたいにする感じですかね。 多分こんな感じ。 preg_replace("/(?:<img [^>]+>\s*){2,}/su", "<div class="group">$0</div>", $input_lines); ↓これの「preg_match_all」か「preg_replace」の部分をクリックしたらテストできます。 http://www.phpliveregex.com/p/fb6
退会済みユーザー

退会済みユーザー

2016/04/01 13:06

ありがとうございます! 参考のURLまで頂いて本当に助かりますm(__)m だいぶイメージできてきました^^ 頑張って実装してみます。
退会済みユーザー

退会済みユーザー

2016/04/01 14:42

Wordpressのthe_contentフックとご教授頂いたreplaceで無事、仕様を実現できました! 本っ当にありがとうございましたm(__)m 一点、ヒントだけでも頂きたいことがあるのですが...(。-ω-) ---- <p>テキスト</p> <img src=""> ---- と一枚の画像をdivで囲み、その真上にあるpタグと画像を合わせてDIVで囲むことは可能なのでしょうか? 具体的には下記のようにしたいです。 ---- <div class="column-1"> <p>テキスト</p> <div class="thumb"><img src=""></div> </div> ---- 先ほどのreplaceのような感覚でいけるものでしょうか? もしよろしければ、ヒントだけでもご教授頂きたいのですm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問