2013-10-01

WordPressテーマ付属のスライドショー/イメージヘッダーのプチカスタマイズ方法

coffee

Minimal WPのスライドショー付きWordPressテーマは、
トップページに3〜5枚の写真が自動で切り替わるようになってるんですが、
これを枚数を減らしたり増やしたり、または1枚の固定画像にしたり、
スライドショー部分丸ごと削除したり、別プラグインに置き換えたりする方法です。

最初から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で微調整してください。

別のスライダープラグインに置き換える場合

<!– スライドショー –>〜<!– / スライドショー –>(または<!– トップページヘッダー画像 –>〜<!– / トップページヘッダー画像 –>)までのコードを、
利用したいプラグインで指定されるコードに置き換えればOKです。

ショートコードタイプはPHPテンプレートファイルに直接記述できないので、
HTML/PHPコードで指定できるプラグインを利用するのがオススメです。

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

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

*HTML/CSSの変更を伴うテーマ編集に関しては、無料サポート外となります。
不具合が生じてもサポートできませんので、自己責任で編集作業を行ってください。
必ず必ず必ずバックアップを取って作業することをオススメします!

おすすめWordPressテーマ10選
by