WordPress 테마 생성 전체 과정(7): sidebar.php 만들기

"워드프레스 테마 제작 전 과정(6): footer.php 만들기"에 대해 소개해 드렸습니다. 이번 글에서는 계속해서 sidebar.php 만드는 방법을 소개해드리겠습니다~

header.php와 footer.php가 완성되었습니다. 오늘은 사이드바 sidebar.php를 만들어 보겠습니다. 사이드바는 커스터마이징이 가능하기 때문에 이 부분의 내용은 제가 설명하기 어렵고 어려워서 일부 내용은 생략하겠습니다!

각 페이지의 공통 사이드바로, header.php 및 footer.php와 마찬가지로 index.php에서 사이드바를 추출하여 sidebar.php에 넣습니다. 좋아요, 이제 테마 디렉터리 Aurelius 아래에 새 파일 sidebar.php를 만들고 index.php에서 코드를 추출하여 sidebar.php에 넣으세요.

<!-- Column 2 / Sidebar -->
<div class="grid_4">
<h3>Catagories</h3>
<ul class="sidebar">
<li><a href="">So who are we?</a></li>
<li><a href="">Philosophy</a></li>
<li><a href="">History</a></li>
<li><a href="">Jobs</a></li>
<li><a href="">Staff</a></li>
<li><a href="">Clients</a></li>
</ul>
<h3>Archives</h3>
<ul class="sidebar">
<li><a href="">January 2010</a></li>
<li><a href="">December 2009</a></li>
<li><a href="">Novemeber 2009</a></li>
<li><a href="">October 2009</a></li>
<li><a href="">September 2009</a></li>
<li><a href="">August 2009</a></li>
</ul>
</div>
<div class="hr grid_12 clearfix"> </div>

그런 다음 텍스트 편집기를 사용하여 index.php, archive.php, page를 엽니다. .php 및 Single.php, 위의 유사한 코드를 삭제하고 다음과 같이 변경합니다.

<?php get_sidebar(); ?>

자, 이제 블로그 홈페이지를 열어 우리가 만든 테마가 여전히 정상적으로 작동하는지 확인하세요. 현재 사이드바는 여전히 정적 코드입니다. WordPress 백엔드 - 모양 - 위젯에서 원하는 열을 사이드바로 드래그할 수 있다는 것은 누구나 알 수 있지만 현재 테마에서는 이 기능을 지원하지 않습니다. 이제 완전한 사이드바를 함께 만들어 보겠습니다.

WordPress 프로그램에 적응하려면 sidebar.php를 미세 조정하고, 새로운 스타일 시트 style.css를 다운로드하고, Aurelius 디렉토리에서 style.css를 교체해야 합니다

제작 시작 sidebar.php 사이드바에 4개의 컬럼을 생성하겠습니다. 초기 상태, 즉 사이드바에 위젯을 배치하지 않은 상태에서는 위에서 아래로 4개의 열이 카테고리 디렉토리, 최신 기사, 태그 클라우드, 기사 월간 아카이브입니다. 이제 sidebar.php의 모든 코드를 삭제하고 다음으로 변경합니다:

<!-- Column 2 / Sidebar -->
<div class="grid_4">
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;First_sidebar&#39;) ) : ?>
<h3>分类目录</h3>
<ul>
<?php wp_list_categories(&#39;depth=1&title_li=&orderby=id&show_count=0&hide_empty=1&child_of=0&#39;); ?>
</ul>
<?php endif; ?>
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;Second_sidebar&#39;) ) : ?>
<h3>最新文章</h3>
<ul>
<?php
$posts = get_posts(&#39;numberposts=6&orderby=post_date&#39;);
foreach($posts as $post) {
setup_postdata($post);
echo &#39;<li><a href="&#39; . get_permalink() . &#39;">&#39; . get_the_title() . &#39;</a></li>&#39;;
}
$post = $posts[0];
?>
</ul>
<?php endif; ?>
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;Third_sidebar&#39;) ) : ?>
<h3>标签云</h3>
<p><?php wp_tag_cloud(&#39;smallest=8&largest=22&#39;); ?></p>
<?php endif; ?>
<?php if ( !function_exists(&#39;dynamic_sidebar&#39;) 
|| !dynamic_sidebar(&#39;Fourth_sidebar&#39;) ) : ?>
<h3>文章存档</h3>
<ul>
<?php wp_get_archives(&#39;limit=10&#39;); ?>
</ul>
<?php endif; ?>
</div>
<div class="hr grid_12 clearfix"> </div>

그런 다음 여기를 클릭하여 function.php를 다운로드하고 테마 디렉토리 Aurelius에 넣으세요. 이때 사이드바는 WordPress 백엔드 - Appearance에서 정상적으로 작동할 수 있습니다. - 이제 위젯을 정상적으로 사이드바로 끌 수 있습니다.

네, sidebar.php가 성공적으로 생성되었습니다. 이 섹션에서는 이론에 대해 많이 이야기하지 않습니다. 핵심은 제가 이것을 어떻게 표현해야 할지 모른다는 것입니다.

추천 학습: "WordPress Tutorial"

위 내용은 WordPress 테마 생성 전체 과정(7): sidebar.php 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!