Facebook
RSS Feed
Oct 1, 2013

スライドショーのプチカスタマイズ方法

coffee

スライドショーはテーマによって3〜5枚程度になってるんですが、
これを2枚にしたいとか10枚にしたいとか、枚数を減らしたり増やしたり、
または1枚の固定画像にしたり、スライドショー部分丸ごと削除したりする方法です。
割と簡単です。

スライドショーの枚数を変更する方法(作業時間3分)

ダッシュボード > 外観 > テーマ編集 > メインインデックスのテンプレート(index.php)
または、
ダッシュボード > 外観 > テーマ編集 > ヘッダー(header.php)

って進んで、スライドショー部分のHTMLを編集します。
いつものことながらこの辺いじくり倒す時はバックアップをお忘れなく!

テーマによって書いてあることは違うんですけど、
よーく見ると以下のような感じのことが書いてある所があると思います。

<!– スライドショー –>
<div id=”slide”>
<img src=”<?php echo (get_option(‘slideshow1’)) ? get_option(‘slideshow1’) : get_bloginfo(‘template_url’) . ‘/images/main_01.jpg’ ?>” alt=”“/>
<img src=”<?php echo (get_option(‘slideshow2’)) ? get_option(‘slideshow2’) : get_bloginfo(‘template_url’) . ‘/images/main_02.jpg’ ?>” alt=”“/>
<img src=”<?php echo (get_option(‘slideshow3’)) ? get_option(‘slideshow3’) : get_bloginfo(‘template_url’) . ‘/images/main_03.jpg’ ?>” alt=”“/>
</div>
<!– / スライドショー –>

ごく普通に画像が3枚、順番に貼ってあるだけです。
それを<div id=”slide”>〜</div>で囲んでるだけです。

枚数を増やす場合

ダッシュボード>メディア>新規追加から、画像をアップロードします。
画像のURLを取得して、HTMLで画像を貼るだけです。

<img src=”http://exsample.com/wp-content/uploads/main_04.jpg”>

例えばmain_04.jpgという画像をアップした場合は上記の感じで、3枚の次に一行追加します。
一般的なHTMLで画像を表示するだけです。
これで次から次へと何枚でも増やせます。
ただ増やしすぎると重くなるし10枚あっても誰も見ないので5枚くらいが限度です。

枚数を減らす場合

画像のいらない分だけ画像コードを1行ずつ削除すればOKです。

スライドショーを止めて1枚の固定画像にする場合

上記の枚数を減らす要領で1枚目だけ残してすべて削除します。

header.php(ダッシュボード>外観>テーマの編集)の20行目くらいの所に、
<script src=”<?php bloginfo(‘template_directory’);?>/jquery/jquery.cycle2.js” type=”text/javascript”></script>
という1行があるのでこれも削除します。
これだけでOKです。

スライドショー部分を丸々削除する場合

<!– スライドショー –>〜<!– / スライドショー –>までのコードを全部削除すればOKです。
テーマによっては余白のバランスが変わる場合があるので、
もし気になればCSSで微調整してください。

*いつもながら「<」と「>」は半角でね!
Minimal WPカスタムの管理画面も合わせて変更したい場合は、
functions.phpのコードを見て理解できればチャンレジしてみてください。
意味が分からない場合はおススメしません。
以上、お試しあれ〜。

スライドショーはCycleというJQueryプラグインを利用しています。
英語ですが、プラグイン作者のヘルプページに詳しい解説が載っていますので、
カスタマイズする場合はこちらを参照してください。

◎通常のテーマのスライドショー > http://jquery.malsup.com/cycle/
◎レスポンシブテーマのスライドショー > http://jquery.malsup.com/cycle2/

カスタマイズの無料サポートは行ってませんので、分からない所はGoogleで調べてくださいね!あと必ず必ずバックアップを取ってから作業することをオススメします!
Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト