raindrops で推奨のMeta Sliderを違うスライダープラグインに変更

こんにちは、

テーマを利用していただきありがとうございます。

Meta Sliderスライダーを表示する仕組みについて、

ヘッダー画像を表示する関数　raindrops_the_header_image()には、raindrops_header_image_home_urlやraindrops_header_image_elementsといったフィルターがあります。

Meta Sliderは、これらのフィルターを使って動作します。
raindrops_header_image_home_urlは、ヘッダー画像をクリックするとホームへのリンクがある場合、
raindrops_header_image_elementsは、リンクがない場合に動作します。

テンプレートは、header.phpが使われます。

どんなプラグインを使おうとしているのかわからないので、手作りでCSSスライダーを追加する例を書いておきます。
functions.php に以下のPHPを追加します。

<?php
add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );

function my_insert_slider( $html ) {

	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">
			<h1 id="slider_title">site title</h1>
	<figure style="max-width:none;">
	<img src="https://dummyimage.com/1600x240/336699/fff" alt><img src="https://dummyimage.com/1600x240/27ae60/fff" alt><img src="https://dummyimage.com/1600x240/e74c3c/fff" alt><img src="https://dummyimage.com/1600x240/8e44ad/fff" alt><img src="https://dummyimage.com/1600x240/d35400/fff" alt>
	</figure>
	</div>';

	if( is_home() ) { //どのページで表示するか条件分岐
		
		return $slider;
	}	
	return $html;
}
?>

カスタマイザーの「追加CSS」

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

#slider_title{
position:absolute;
top:1em;
left:1em;
z-index:1;
color:#fff;
font-weight:bold;
}
#my_insert_slider { overflow: hidden; }
#my_insert_slider figure img { width: 20%; float: left; }
#my_insert_slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

実際のコードは、

plugins/plugins-presentation.phpの中にあります。

動作の仕組みは、
テーマをインストールした後に、プラグインがアクティベートされた時だけ動作する。
（すでにアクティベートしている場合は、なんてこととするんだってなるので）
こういうプラグインは、大抵カスタム投稿タイプを使っているので、使っているカスタム投稿タイプから、
スライダーIDなどを取得して、先のフィルターの画像要素の部分にあたるところで、do_shortcode()して
表示しています。
テーマインストール後アクティベートされていれば、カスタマイザーのアドオンセクションに管理項目を表示するといった段取りになっていたと思います。

• この返信は7年、 5ヶ月前にnobitaが編集しました。
• この返信は7年、 5ヶ月前にnobitaが編集しました。
• この返信は7年、 5ヶ月前にnobitaが編集しました。

プラグインの名前は解かりますか？

こんなかんじでどうでしょう

<?php
add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );

function my_insert_slider( $html ) {

	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">%1$s</div>';

	if ( ( is_home() ) {

		return sprintf( $slider, do_shortcode( '[wdps id="1"]' ) );
	}
	return $html;
}
?>

• この返信は7年、 5ヶ月前にnobitaが編集しました。
• この返信は7年、 5ヶ月前にnobitaが編集しました。

コードに間違いがあったので、再掲します。

Smart Slider 3

<?php
add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );
function my_insert_slider( $html ) {

	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">%1$s</div>';

	if (  is_home() ) {
		return sprintf( $slider, do_shortcode( '[smartslider3 slider="1"]' ) );
	}
	return $html;
}
?>

Post Slider WD

<?php
add_filter( 'raindrops_header_image_home_url', 'my_insert_slider' );
add_filter( 'raindrops_header_image_elements', 'my_insert_slider' );
function my_insert_slider( $html ) {

	$slider = '<div id="my_insert_slider" style="width:100%;overflow:hidden;">%1$s</div>';

	if (  is_home() ) {
		return sprintf( $slider, do_shortcode( '[wdps id="1"]' ) );
	}
	return $html;
}
?>

ショートコードは、wps じゃなくて　wdpsというのもあるんですか？

Post Slider WDは、フリー版だと、サイズの調整機能が見つからなかったのですが、小さく表示されるようですね。

実はスライダーの件で諦めていた

今後の役に立てたいので、どのような事であきらめていたのか教えていただけるとうれしいです

• この返信は7年、 5ヶ月前にnobitaが編集しました。

mod look　管理者様

@wpmidさんの投稿が反映していないようです。

メールで投稿が届いていたので、内容を私の返信に追加したら、私の投稿も消えてしまいました。

@wpmid さん

メールが届いているので書き直す必要はありません。

ちょっと時間がかかると思いますが、動作確認用チャイルドテーマを作成して、ダウンロードできるようにしたいと思います。

• この返信は7年、 5ヶ月前にnobitaが編集しました。

子テーマの作成は2種類で行なっていました。
始めのコードを
1）Child Theme Configuratorというプラグインで作成した子テーマの　functions.php　に追加すると、サイトが表示されなくなった。
2）「チャイルドテーマの作成方法」に従って子テーマを作成の　functions.php　に追加したがなにも変化がなかった。

今回のスライダーをテストするためのチャイルドテーマを作ってみましたので、時間のある時にでもテストしてみてください。

tenman.info/download/raindrops-slider.zip

使い方

二つのスライダープラグインを両方アクティベートしておいてから、

チャイルドテーマをインストールして、カスタマイザーを開くとEXAMPLEというセクションが追加されていると思いますので、WDスライダーを一度選択して、保存していただき、ブログを表示するとWDスライダーが表示されます。（カスタマイザープリビューの更新は行われません）
以降、スライダーを切り替えたり、スライダーIDを変更したりして確認作業を行ってください。

また、何度かテーマの変更をしていく間に、「スティッキーウィジェット」が、TOPページのコンテンツ内に表示されていることに気が付きました。
私は「エキストラサイドバー」の下に「スティッキーウィジェット」が現れると認識していたのですが、それは間違いだったのでしょうか。

トップページの、投稿一覧の上部に表示されるウィジェットです。サイドバー等で固定表示されるようなウィジェットも「スティッキーウィジェット」といった呼ばれ方をすることがあるかもしれませんが、Raindropsの場合には投稿一覧の上部になります。

Raindropsのスティキーウィジェットエリアは、何を考えて配置したか？なんですが、最近増えているワンページレイアウト等、トップページに直接記事を配置するような形式に対応するために設けた機能です。
スティキーウィジェットエリアにピンナップ投稿ウィジェットを追加して、投稿IDを3つぐらいカンマ区切りで入力して、グリッドレイアウト、アイキャッチ画像を設定すると投稿がグリッド形式で表示されます。そういった表示を行うために作った機能です。

外観＞カスタマイズ　からのウィジェット編集において、TOPページ以外では、「スティッキーウィジェット」の表示がなくなります。
ダッシュボード経由ですと、「スティッキーウィジェット」の項目がなくなってはいないません。

スティキーウィジェットは、トップページだけで表示します。例えば2ページ目以降は表示しない設定になっています。
（ちょっとカスタマイズすると、カテゴリーやほかのアーカイブでも表示が可能です。）

カスタマイザーは、テンプレートのこの設定を検出するため　2ページ目以降を表示している場合は、ウィジェットエリアが表示されません。

ダッシュボード経由の、ウィジェットのページでは、常に表示されます。

少し前に「デフォルトサイドバー側にスティッキーウィジェット」といったカスタマイズを見つけ行なった記憶があり、それが見当たらないのですが、そのことが関係ありますでしょうか？

多分関係ないと思います。「デフォルトサイドバー側にスティッキーウィジェット」という表現だと、例えば広告ブロックなんかをサイドバーのスペースが余っていたら、その部分では常に広告ブロックを表示し続けるといった機能を示すものではないかと思います。

「wps」は無料版か、もしかしたら他のスライダープラグインのショートコードかもしれません。（Post Slider WDはWDというサイトのプラグインなので）というのもあるんですか？

すみません、wds の間違いでした。プロ版なので、wdpsになるんでしょうね

今後の役に立てたいので、どのような事であきらめていたのか教えていただけるとうれしいです

Raindrops　に初めてであった時に一目惚れして導入しました。

うれしいですね、「一目惚れ」　いい響きだなー

2年～1年半ほど前の間だったと思うのですが、アップデートの際にレイアウトが崩れてしまって原因がわからず仕方なく「Catch Evolution」というテーマに変更していましたが、今度は「Smart Slider 3」の仕様の変更で表示されなくなってしまいました。

気づかないうちにいろいろ迷惑をおかけしていたようでごめんなさい。いろいろやらかしてしまう事も少なくないのですが、このフォーラムに書き込んでいただければ、可能な限り対処します。よろしくお願いします。

こういう機会でもないと、スライダープラグインを改めてみてみる事もなかったと思います。進化していますね、勉強になりました。

• この返信は7年、 5ヶ月前にnobitaが編集しました。

書き忘れました

functions.php　54行

return sprintf( $slider, do_shortcode( '[wds id="' . $id . '"]' ) );

フリー版で作ったので　プロ版の場合は

return sprintf( $slider, do_shortcode( '[wdps id="' . $id . '"]' ) );

になると思うので、プロ版の場合は、その点修正してください

• この返信は7年、 5ヶ月前にnobitaが編集しました。