Cocoonのアピールエリアの背景画像をランダムで表示するカスタマイズ

ワードプレスの無料テーマ『Cocoon』でアピールエリアの背景画像を複数の画層の中からランダムで表示するカスタマイズの方法の解説です。

まずCocoonの設定画面でアピールエリアの表示条件や画像の高さなどを設定します。ここでは画像は何も設定しません。

次に、外観＞テーマエディタでfunctions.phpを選択して、以下のPHPスクリプトをコピペしてください。

これは準備した4つの画像の中からひとつをランダムで選んで表示します。画像ファイルのURL部分は自分が表示したい画像ファイルに変更して、その数を増やすなり減らすなりも自由にしてください。

// Cocoonのアピールエリアの背景を複数の画像からランダムで表示するカスタマイズ
// https://henteko.net/post/cocoon-appeal-background-image-randomize/
function cocoon_hook_css(){
    $images = array(
        "https://henteko.net/wp-content/uploads/2020/12/Chrysanthemum.jpg",
        "https://henteko.net/wp-content/uploads/2020/12/Desert.jpg",
        "https://henteko.net/wp-content/uploads/2020/12/Hydrangeas.jpg",
        "https://henteko.net/wp-content/uploads/2020/12/Tulips.jpg",
    );
    $randomImage = $images[ array_rand( $images ) ];
    $output = "<style> .appeal{background-image:url({$randomImage})} </style>";
    echo $output;
}
add_action( 'wp_head', 'cocoon_hook_css' );

※functions.phpを使う代わりにCode Snippetsプラグインを使うと、個別に機能をON/OFFできて便利です。

functions.phpを使わずに追加phpコードを個別管理するプラグイン…Code Snippets

ワードプレスはテーマ（テンプレート）ファイル中のfunctions.phpにphpコードを追加で記述することでもカスタマイズをすることが出来ます。そしてこのCode Snippetsプラグインを使うと、カスタマイズ内容をプラグインのように個...

その他のCocoonカスタマイズ

Cocoonカスタマイズ

ワードプレスの無料テーマ『Cocoon』をカスタマイズした備忘録