ワードプレスでバナーを作る方法

WordPress Web サイトのバナー切り替え図を作成する方法は実際にはたくさんありますが、その中には Wordpress プラグインを使用して作成されるものもあります。しかし、Web サイト作成の初心者にとって、WordPress Web サイトの背景 Web サイトコンテンツを自動的に呼び出すバナー切り替え図を作成するのは簡単な作業ではありません。

WordPressにバナー切り替え図を追加する方法を共有しましょう。まずは効果を見てみましょう！

関連する推奨事項: 「WordPress チュートリアル 」

WordPress でバナー切り替え図を追加する手順

ステップ 1: バナー切り替えチャートのスライド ファイルをダウンロード [ダウンロード アドレス: http://pan.baidu.com/s/1bnsevr5]

ステップ 2: ダウンロードしたファイルを解凍すると、JS フォルダーが配置されますテーマフォルダーの下にあります。

ステップ 3: 次の JS コードを タグ内に配置します。

<script type="text/javascript" src="<?php bloginfo(&#39;template_directory&#39;); ?>/js/jquery-1.4a2.min.js" type="text
/javascript"></script>
<script type="text/javascript" src="<?php bloginfo(&#39;template_directory&#39;); ?>/js/jquery.KinSlideshow-1.2.1.min.js" 
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#KinSlideshow").KinSlideshow();
})
</script>

ステップ 4: 次のコードを Web サイトのテンプレート関数ファイル function.php に追加して、記事内の画像を呼び出します。

//缩略图
function get_first_image() {
global $post;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all(&#39;/<img .+src=[\&#39;"]([^\&#39;"]+)[\&#39;"].* alt="ワードプレスでバナーを作る方法" >/i&#39;, $post->post_content, $matches);
$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo(&#39;template_url&#39;) 
. "/images/default.jpg";
};
return $first_img;
}

ステップ 5: バナー切り替え画像を表示する必要がある DIV に次のコードを挿入します。この画像は、Web サイトの背景で特定のカテゴリの記事内の画像を呼び出すために使用されます [cat=5] 、カテゴリ番号は自分で変更できます]

<div id="KinSlideshow" style="visibility:hidden;">
<?php if (have_posts()) : ?>
<?php query_posts(&#39;cat=5&#39; . $mcatID. &#39;&caller_get_posts=1&showposts=4&#39;); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" target="_blank" title="<?php the_title(); ?>"><img src="<?php echo get_first_image
(); ?>" /></a>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</div>

ステップ 6: 以下の CSS スタイルを style.css の下部に配置して、バナー切り替え画像のサイズとスタイルを制御します。

/*幻灯片*/
#KinSlideshow {float:left;height:300px;background:#999; margin-top:5px; margin-bottom:5px; }
#KinSlideshow img {width:1008px;height:300px;}

ステップ 7: Web サイトの背景にカテゴリ ディレクトリを作成し、「スライドショー」という名前を付けます。次に、このカテゴリに 4 つの記事を公開し、各記事に画像を投稿します。画像のサイズは次のようになります。適用済み Web サイトの幅は一定です。次に、上記のコード [手順 5] の ID 番号をこのカテゴリの ID 番号に変更します。

以上がワードプレスでバナーを作る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。