Meta Sliderのテキスト追加について

解決済 hachikuma
(@hachikuma)

3年、 12ヶ月前

Meta Sliderのプラグインを使ってます。
画像の上に大きさや色の異なる文字をいくつ入れたいのですが、
標準についてるキャプションだけでは1種類しか入れられません。

何かいい方法はありますでしょうか？

htmlで書き込むするところとか方法があればいいのですが。

どうぞよろしくお願いいたします。

8件の返信を表示中 - 1 - 8件目 (全8件中)

munyagu
(@munyagu)

3年、 12ヶ月前
こんにちは

スライドの HTML を変更するフィルターフックが用意されています。
- coin : metaslider_image_coin_slider_markup
- flex : metaslider_image_flex_slider_markup
- nivo : metaslider_image_nivo_slider_markup
- responsive : metaslider_image_responsive_slider_markup
これらを以下のように使えば任意の HTML を挿入できるので、CSS で表示を整えればできそうに思います。
```
function my_metaslider_markup( $html, $slide, $settings ){
	if( '何らかのタイトル' === $slide['title'] ) {
		$html .= '<div class="additional_texxt">何らかのテキスト</div>';
	}
	return $html;
}
add_filter( 'metaslider_image_coin_slider_markup', 'my_metaslider_markup', 10, 3 );
```
スライドのタイトルでどのようなテキストを入れるのか判断していますが、他のスライドの設定などでも切り替えることが出来ます。
このままの方法だと、スライドのアンカータグの外に HTML が追加されるので、何か面倒かもしれません。
アンカータグの中に入れたい場合は正規表現を使うか、最後の</a>をけずって HTML を追加し、再度末尾に</a>を追加するなど、工夫してみてください。
- この返信は3年、 12ヶ月前にmunyaguが編集しました。
トピック投稿者 hachikuma
(@hachikuma)

3年、 12ヶ月前

munyaguさん、ご回答ありがとうございます。

ちょっと私にとってレベルが高い内容でした。
でもこれを克服しないと今後幅が広がっていきませんね・・・。

function~のソースは、PHPでしょうか？
これをどこかHTMLに記述すれば表示されるのでしょうか？

試しに、’何らかのタイトル’の部分を作成済みのスラーダータイトルに置き換えて、
header.phpのbody以降に埋め込んでみましたがダメでした。

初歩的なことで申し訳ありませんが、埋め込み方法までご教授して頂ければ幸いです。
どうぞよろしくお願いいたします。

munyagu
(@munyagu)

3年、 12ヶ月前

すいません、説明が足りませんでした。

テーマの functions.php に追記してください。

作業前にファイルのバックアップを取っておくことをお勧めします。

また、私は Meta Slider プラグインを使ったことはありますが、このコードを実際に実行したわけではありません。
うまく動かない可能性がはありますが、その際は再度ご質問ください。
トピック投稿者 hachikuma
(@hachikuma)

3年、 12ヶ月前
ご回答ありがとうございます。

埋め込みましたがダメでした。
どこかに隠れてるかとも思って、ブラウザ表示のソースを開いてみましたが、どこにもなさそうでした。

テーマの functions.phpには下記のように記載しました。
上段は元々の子テーマ導入時のコードです。
尚、「トップページ001」はスライダーの名前です。
```
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}

function my_metaslider_markup( $html, $slide, $settings ){
if( 'トップページ001' === $slide['title'] ) {
  $html .= '<div class="additional_texxt">何らかのテキスト</div>';
}
return $html;
}
add_filter( 'metaslider_image_coin_slider_markup', 'my_metaslider_markup', 10, 3 );

?>
```
何かアドバイス頂ければ幸いです。
どうぞよろしくお願いいたします。
munyagu
(@munyagu)

3年、 12ヶ月前
いくつか確認させてください。

まず、coin : metaslider_image_coin_slider_markup を使われているということは、スライドの設定で Coin Slider を選択しているということで合っていますか？
選択しているスライダーの種類によって使い分けてください。

次に、

尚、「トップページ001」はスライダーの名前です。

とのことですが、このコードは「スライドのタイトル」で判断するもので、「スライダーのタイトル」ではありません。

スライダーにいくつかのスライドを追加すると思いますが、スライドは基本的にはメディアファイルそのものです。
「スライドのタイトル」とはすなわち、メディアに設定しているタイトルのことです。

スライドごとにテキストを変えるのではなくスライダー全体でどのスライドでも同じテキストのHTMLを出したいのであればこの分岐は不要です。

しかし、ご紹介したフィルターフックでは現在どのスライダーを処理しようとしているのかを判断することができません。
各スライドごとではなく、スライダーに対して HTML が一つ出ればいいのであれば、以下のフィルターフックをお使いください。
- coin : metaslider_coin_slider_get_html
- flex : metaslider_flex_slider_get_html
- nivo : metaslider_nivo_slider_get_html
- responsive : metaslider_responsive_slider_get_html
この場合、（Coin Slider を選んでいるのであれば）以下のようなソースになります。
```
function my_slider_get_html( $html, $slider_id, $settings ){
	if( '20' === $slider_id) {
		$html .= '<div class="additional_texxt">何らかのテキスト</div>';
	}
	return $html;
}
add_filter( 'metaslider_coin_slider_get_html', 'my_slider_get_html', 10, 3 );
```
スライド ID として 20 を指定しています
この ID はスライダーのショートコードに書かれているものです。
- この返信は3年、 12ヶ月前にmunyaguが編集しました。
トピック投稿者 hachikuma
(@hachikuma)

3年、 12ヶ月前

munyaguさん、何度もご回答ありがとうございます。
仰ってることがやっと理解できました。
お陰様で表示ができました！

使ってるスライドの設定はflexでした。
テキストを変えたいのはスライドごとです。スライダー全体ではありませんでした。
なのにご指摘の通りスライダーのタイトルを入れておりました。
ですので、’何らかのタイトル’のところはスライドのタイトルに変えてみました。

しかし、最初仰っていた通りアンカータグの外に HTML が追加されました。
ですので、

＞アンカータグの中に入れたい場合は正規表現を使うか、最後のをけずって HTML を追加し、再度末尾にを追加するなど、工夫してみてください。

を行いたいのですが、これがまた理解不足でして・・・
最後のとは、どこのことなのでしょうか？

何度も申し訳ありませんが、ご回答いただければ幸いです。
よろしくお願いいたします。
munyagu
(@munyagu)

3年、 12ヶ月前
Flex Slider ですと、a タグではなく、li タグじゃないでしょうか。

関数の最初の引数、$html にはデフォルトでの HTML が入ってくるのですが、これが Flex Slider では li タグで囲まれた HTML が入っています、
ですので、後ろの閉じタグ</li>を削除してから追加テキストのHTMLをくっつけて、それから削除した</li>を再度くっつければ、追加テキストの HTML を li タグの中に入れることができます。

具体的には以下のような感じでしょうか。
```
function my_metaslider_markup( $html, $slide, $settings ){
	if( 'スライドのタイトル' === $slide['title'] ) {
		$html = substr( $html, 0, strlen( $html ) - 5 ); // 最期の5文字をけずっています
		$html .= '<div class="additional_texxt">何らかのテキスト</div>';
		$html .= '</li>';
	}
	return $html;
}
add_filter( 'metaslider_image_flex_slider_markup', 'my_metaslider_markup', 10, 3 );
```
- この返信は3年、 12ヶ月前にmunyaguが編集しました。
トピック投稿者 hachikuma
(@hachikuma)

3年、 12ヶ月前
munyaguさん、上手くいきました！
cssで文字の位置も調整しました。
ありがとうございます！！

実はちょうどこのコロナの外出自粛を利用して、
PHPの教科書を1ページ目から開き始めたところでした。

今回教えていただいたことで、この先の理解を深めるのに
すごく役に立つと思いました。
その意味でも感謝申し上げます！

本当に本当にありがとうございました。
- この返信は3年、 12ヶ月前にhachikumaが編集しました。

8件の返信を表示中 - 1 - 8件目 (全8件中)

トピック「Meta Sliderのテキスト追加について」には新たに返信することはできません。