WordPress에서 배너를 만드는 방법

실제로 WordPress 웹사이트용 배너 전환 다이어그램을 만드는 방법은 여러 가지가 있으며, 그 중 일부는 WordPress 플러그인을 통해 만들어집니다. 하지만 웹사이트를 만드는 초보자에게는 WordPress 웹사이트의 배경 웹사이트 콘텐츠를 자동으로 호출하는 배너 전환 다이어그램을 만드는 것이 쉬운 작업이 아닙니다.

WordPress에 배너 전환 다이어그램을 추가하는 방법을 공유해 보겠습니다. 먼저 효과를 살펴보겠습니다!

관련 추천: "WordPress Tutorial"

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단계: 웹사이트 템플릿 함수 파일인 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="WordPress에서 배너를 만드는 방법" >/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에 다음 코드를 입력합니다. 이는 웹사이트 배경에서 특정 카테고리의 기사에 있는 사진을 호출하는 데 사용됩니다. [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단계: style.css 하단에 다음 CSS 스타일을 배치하여 배너 전환 이미지의 크기와 스타일을 제어합니다.

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

7단계: 웹사이트 배경에 카테고리 디렉토리를 만들고 이름을 "Slideshow"로 지정한 다음 이 카테고리에 4개의 기사를 게시하고 각 기사에 사진을 게시하세요. 이미지 크기는 웹사이트 너비와 같아야 합니다. 일관된. 그런 다음 위 [Step 5] 코드의 ID 번호를 해당 카테고리의 ID 번호로 변경합니다.

위 내용은 WordPress에서 배너를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!