Keseluruhan proses penciptaan tema WordPress (7): membuat sidebar.php

Saya memperkenalkan anda kepada "Keseluruhan proses penghasilan tema WordPress (6): Membuat footer.php". it together~

Selepas membuat header.php dan footer.php, hari ini kita akan buat sidebar.php. Oleh kerana bar sisi sangat boleh disesuaikan, kandungan dalam bahagian ini sukar dan sukar untuk saya jelaskan, dan beberapa kandungan akan ditinggalkan!

Sebagai bar sisi biasa untuk setiap halaman, kami masih mengekstrak bar sisi daripada index.php dan meletakkannya di bar sisi.php seperti yang kami lakukan semasa kami membuat header.php dan footer.php. Okey, sekarang buat fail sidebar.php baharu di bawah direktori tema anda Aurelius, ekstrak kod daripada index.php, dan letakkannya ke bar sisi.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>

Kemudian gunakan penyunting teks untuk membuka indeks. php , archive.php, page.php dan single.php, padamkan kod serupa di atas dan tukar kepada:

<?php get_sidebar(); ?>

Baiklah, sekarang buka laman utama blog anda dan lihat sama ada tema yang kami cipta masih berfungsi dengan betul. Pada masa ini, bar sisi kami masih merupakan kod statik Semua orang mungkin tahu bahawa dalam bahagian belakang WordPress - Rupa - Widget, anda boleh menyeret lajur yang anda mahu ke bar sisi, tetapi tema kami tidak menyokong fungsi ini pada masa ini. Sekarang izinkan saya membuat bar sisi lengkap bersama-sama.

Untuk menyesuaikan diri dengan program WordPress, kami juga perlu membuat beberapa penalaan halus pada sidebar.php, muat turun style.css helaian gaya baharu dan gantikan style.css dalam direktori Aurelius

Mula sidebar.php Untuk membuat, kami akan meletakkan 4 lajur di bar sisi. Dalam keadaan awal, iaitu, apabila anda tidak meletakkan sebarang widget pada bar sisi, empat lajur dari atas ke bawah ialah direktori kategori, artikel terkini, awan teg dan arkib bulanan artikel. Sekarang padamkan semua kod dalam sidebar.php dan tukar kepada:

<!-- 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>

Kemudian klik di sini untuk memuat turun functions.php dan letakkannya dalam direktori tema Aurelius Pada masa ini, bar sisi anda boleh berfungsi seperti biasa. Dalam bahagian belakang WordPress - Penampilan - Widget, anda boleh menyeret widget ke bar sisi seperti biasa.

Baiklah, sidebar.php telah berjaya dibuat. Bahagian ini tidak banyak bercakap tentang teori yang penting ialah saya tidak tahu bagaimana untuk menyatakan perkara ini. Walaupun saya mengatakannya, anda mungkin tidak memahaminya dengan baik.

Pembelajaran yang disyorkan: "Tutorial WordPress"

Atas ialah kandungan terperinci Keseluruhan proses penciptaan tema WordPress (7): membuat sidebar.php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!