Seluruh proses penciptaan tema WordPress (5): membuat header.php-WordTekan-php.cn

Rumah

Tutorial CMS

WordTekan

Seluruh proses penciptaan tema WordPress (5): membuat header.php

青灯夜游

Feb 21, 2023 am 10:21 AM

phpwordpress

Saya memperkenalkan anda kepada "Keseluruhan proses pengeluaran tema WordPress (4): Satu ujian kecil ". .php" , mari kita lihat bersama-sama~

Anda boleh cuba menggunakan editor teks untuk membuka fail yang dimuat turun daripada Proses pengeluaran tema WordPress (3): Pengeluaran templat statik HTML .html, saya tertanya-tanya adakah anda perasan bahawa kod dalam pengepalanya sangat serupa? Malah, kami boleh mengekstrak bahagian kod yang serupa ini dan memasukkannya ke dalam fail berasingan header.php Apabila setiap halaman ingin menggunakan bahagian kod ini, gunakan include() atau WordPress get_header() untuk memasukkannya, menyimpan setiap. halaman. Bahagian kod ini mesti ditulis dalam halaman, dan ia boleh diubah suai untuk mencapai tujuan perubahan lengkap.

Ingatkan saya sekali lagi: Jika anda tidak bercadang untuk menulis kod, jangan baca siri tutorial ini, ia tidak akan membantu anda!

Kemudian buat fail php baharu wp-contentthemesAurelius dalam direktori tema yang kami buat kali terakhir header.php Kami mengekstrak kod pengepala dalam index.php dan salin dan tampalkannya ke dalam header.php, seperti berikut Kod. ialah semua kod pada masa ini dalam header.php (sudah tentu kod pengepala tema yang berbeza adalah berbeza, anda boleh menyesuaikannya dalam projek sebenar anda):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aurelius | Blog</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="container_12 clearfix">
	<!-- Text Logo -->
	<h1 id="Aurelius">Aurelius</h1>
	<!-- Navigation Menu -->
	<ul id="navigation" class="grid_8">
		<li><a href="contact.html"><span class="meta">Get in touch</span><br />
			Contact Us</a></li>
		<li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
			Blog</a></li>
		<li><a href="index.html"><span class="meta">Homepage</span><br />
			Home</a></li>
	</ul>
	<div class="hr grid_12 clearfix"> </div>
	<!-- Caption Line -->
	<h2 id="Our-nbsp-span-blog-span-nbsp-keeping-nbsp-you-nbsp-up-to-date-nbsp-on-nbsp-our-nbsp-latest-nbsp-news">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
	<div class="hr grid_12 clearfix"> </div>

Kemudian gunakan teks editor untuk membuka index.php, archive.php, contact.php, full_width.php, page.php dan single.php, padamkan kod serupa di atas dan tukar kepada:

&lt;?php get_header(); ?&gt;

Baik, sekarang buka laman utama blog ujian anda untuk melihat sama ada tema yang kami buat masih boleh berfungsi seperti biasa. get_header() adalah bersamaan dengan menyalin kod dalam header.php ke fail php semasa. Seterusnya, kami akan melihat dengan lebih dekat kandungan dinamik dalam header.php. header.php akan disertakan dalam semua halaman templat (halaman utama, halaman kategori, halaman, halaman teg, dll.), jadi kod dalam header.php hendaklah dinamik dan sesuai untuk halaman yang berbeza, jadi kod PHP perlu digunakan di sini , dan Bukan hanya HTML. Mari kita ubah suai header.php bersama-sama:

1 Tukar

Kita semua tahu bahawa tajuk halaman yang berbeza adalah berbeza, dan tajuk Tetapan akan. juga secara langsung mempengaruhi kesan SEO, jadi tetapan harus dibuat dengan teliti di sini. Yang berikut menyediakan kaedah penulisan tajuk yang dioptimumkan SEO Tukar <title>Aurelius | Blog</title> kepada:

<title><?php if ( is_home() ) {
		bloginfo(&#39;name&#39;); echo " - "; bloginfo(&#39;description&#39;);
	} elseif ( is_category() ) {
		single_cat_title(); echo " - "; bloginfo(&#39;name&#39;);
	} elseif (is_single() || is_page() ) {
		single_post_title();
	} elseif (is_search() ) {
		echo "搜索结果"; echo " - "; bloginfo(&#39;name&#39;);
	} elseif (is_404() ) {
		echo &#39;页面未找到!&#39;;
	} else {
		wp_title(&#39;&#39;,true);
	} ?></title>

Kod PHP yang ditambahkan di atas menggunakan pertimbangan bersyarat dan menggunakan tajuk yang berbeza untuk halaman yang berbeza.

is_home(): Mengembalikan benar apabila halaman semasa ialah halaman utama
is_category(): Mengembalikan benar apabila halaman semasa ialah halaman kategori
is_single(): Halaman semasa Kembali benar apabila halaman artikel tunggal
is_page(): Kembali benar apabila halaman semasa ialah halaman tunggal

Setakat ini, anda mungkin tidak mempunyai pemahaman yang mendalam tentang teg penghakiman bersyarat ini, dan saya tidak faham cara penggunaan teg ini akan mempengaruhi tema Apabila tutorial kami melangkah lebih jauh, anda akan faham secara perlahan. Jika anda tidak menyukai cara tajuk ditulis di atas, anda boleh mencari kod yang berkaitan dalam talian: WordPress SEO title

2. Tukar laluan style.css helaian gaya

Sebelum ini anda Halaman utama yang saya lihat semuanya kucar-kacir kerana gaya css belum dimuatkan lagi. Sekarang mari kita tambah gaya bersama-sama. Anda boleh menemui sekeping kod ini dalam header.php:

<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />

Jika anda bijak, anda boleh bertanya: Bukankah sudah ada wp-contentthemesAurelius dalam style.css direktori? Jadi mengapa header.php tidak memuatkan css? Seperti yang anda boleh lihat hasilnya, halaman berada dalam keadaan kucar-kacir, dan anda boleh yakin bahawa css tidak dimuatkan. Kerana ini adalah tema WordPress, ia perlu dipanggil oleh program utama WordPress, dan blog anda boleh dipaparkan selepas lapisan analisis, dan bukannya fail halaman web statik html yang mudah. Pengubahsuaian yang betul:

<link rel="stylesheet" href="<?php bloginfo(&#39;stylesheet_url&#39;); ?>" type="text/css" media="screen" />

bloginfo('stylesheet_url')输出的是你的主题css文件绝对网址，如http://localhost/wp/wp-content/themes/Aurelius/style.css，WordPress程序会自动识别你的WordPress安装地址，当前启用的主题，自动输出这个style.css链接。现在你可以试着更改一下，然后刷新一下你的博客首页，查看网页源代码，style.css的链接是不是变成你的了？页面是否可以正常显示了呢？

如果你的css文件不是style.css，且不是在主题根目录下，那怎么办呢？我们可以用<?php bloginfo('template_url'); ?>来获取主题根目录的URL，如你的主题css文件是abc.css，那么我们可以这样写：<?php bloginfo('template_url'); ?>/abc.css，如果是在子目录css下那就这样：<?php bloginfo('template_url'); ?>/css/abc.css。同样加载js文件也是这样。

不过，还有几张图片的路径不对，还不能显示出来，现在我们一起用文本编辑器打开index.php、archive.php、contact.php、full_width.php、page.php和single.php，给这些图片加上正确的URL，搜索代码，将所有的：src="images/，批量替换成src="<?php bloginfo('template_url'); ?>/images/。现在再刷新你的主页，看文章的缩略图是否可以正常显示。<?php bloginfo('template_url'); ?>用于输出主题目录的URL。

3、添加pingback

至于什么是pingback，你可以在搜索引擎中输入关键字：WordPress pingback，就可以得到你想要的答案了。如果你需要这个功能，可以在里面添加以下代码：

<link rel="pingback" href="<?php bloginfo(&#39;pingback_url&#39;); ?>" />

4、更改博客名称和描述

在header.php，下面两行代码用于显示博客名称和描述：

<h1 id="Aurelius">Aurelius</h1>
<h2 id="Our-nbsp-span-blog-span-nbsp-keeping-nbsp-you-nbsp-up-to-date-nbsp-on-nbsp-our-nbsp-latest-nbsp-news">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>

上面是静态代码，现在做如下修改：

<h1 id="logo" class="grid_4"><a href="<?php echo get_option(&#39;home&#39;); ?>/"><?php bloginfo(&#39;name&#39;); ?></a></h1>
<h2 class="grid_12 caption clearfix"><?php bloginfo(&#39;description&#39;); ?></h2>

现在你的博客首页看到的就是你博客名称和描述了，并且logo也是一个链接指向你的博客首页。我们这里说说这些php代码的作用。

<?php echo get_option('home'); ?> 输出你的博客首页网址
<?php bloginfo('name'); ?> 输出你的博客名称
<?php bloginfo('description'); ?> 输出博客描述

博客名称和描述可以在WordPress管理后台 - 设置 - 常规那里更改。以后制作你自己的WordPress主题的时候，你可参照上面的说明对你的主题进行修改。

5、添加订阅feed链接

相信每个已发布的WordPress博客主题都会提供feed订阅，当然我们的主题也应该提供这样的功能。在之前添加以下代码：

<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php echo get_bloginfo(&#39;rss2_url&#39;); ?>" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo(&#39;comments_rss2_url&#39;); ?>" />

6、添加wp_head

有些插件需要在网页头部执行一些类如添加一些js或css的动作，要让这些插件能够正常的工作，也让你的主题有更好的兼容性，你应该添加wp_head()函数。打开header.php，在前面添加以下代码即可：

&lt;?php wp_head(); ?&gt;

现在打开你的博客主页，查看源代码，前面是不是多了以下类似代码（这些都是wp_head()的功劳）：

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://ludou.co.tv/blog/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://ludou.co.tv/blog/wp-includes/wlwmanifest.xml" /> 
<link rel=&#39;index&#39;  href=&#39;http://ludou.co.tv&#39; />
<meta name="generator" content="WordPress 2.9.2" />

7、添加Description 和 Keywords

关于添加网页描述和关键字，可以查看我之前写过的文章：WordPress使用经验（一）独立的Description 和 Keywords

8、显示菜单栏

目前菜单栏有Home、Blog和Contact Us几个菜单，不过这些都是静态的内容，并不是你博客上的页面。现在我们将菜单栏换成你的菜单，这里只在菜单栏中列出页面page，当然你也可以再放置分类，根据你的喜好来吧，将header.php中：

<ul id="navigation" class="grid_8">
	<li><a href="contact.html"><span class="meta">Get in touch</span><br />
		Contact Us</a></li>
	<li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
		Blog</a></li>
	<li><a href="index.html"><span class="meta">Homepage</span><br />
		Home</a></li>
</ul>

改成：

<ul id="navigation" class="grid_8">
	<?php wp_list_pages(&#39;depth=1&title_li=0&sort_column=menu_order&#39;); ?>
	<li <?php if (is_home()) { echo &#39;class="current"&#39;;} ?>><a title="<?php bloginfo(&#39;name&#39;); ?>"  href="<?php echo get_option(&#39;home&#39;); ?>/">主页</a></li>
</ul>

Dua artikel berikut memperkenalkan cara membuat menu WordPress, anda juga boleh merujuk kepada:

9 🎜> Tambah kod PHP di hadapan

dan selepas

untuk meningkatkan kecekapan menjalankan program: <?php flush(); ?>

Ringkasan

Baiklah, ini adalah Ini adalah akhir latihan ini! Sekarang ringkaskan beberapa perkara pengetahuan yang lebih penting yang disebut hari ini:

<?php get_header(); ?>
is_home()，is_single()，is_category()
<?php bloginfo('stylesheet_url'); ?>
<?php bloginfo('pingback_url'); ?>
<?php bloginfo('template_url'); ?>
<?php echo get_option('home'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>
<?php wp_head(); ?>
<?php wp_list_categories(); ?>
<?php wp_list_pages(); ?>

selepas pengubahsuaian ini disediakan Anda boleh membukanya dengan editor teks dan membandingkannya dengan fail yang anda ubah suai (terutamanya

) untuk melihat cara anda menukarnya? Aureliusheader.php

Pembelajaran yang disyorkan: "

Tutorial WordPress

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

Kenyataan

Artikel ini dikembalikan pada:露兜即刻. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Bolehkah saya belajar WordPress dalam 3 hari?Apr 09, 2025 am 12:16 AM

Boleh belajar WordPress dalam masa tiga hari. 1. Menguasai pengetahuan asas, seperti tema, pemalam, dan lain-lain. 2. Memahami fungsi teras, termasuk prinsip pemasangan dan kerja. 3. Belajar penggunaan asas dan lanjutan melalui contoh. 4. Memahami teknik debugging dan cadangan pengoptimuman prestasi.

Adakah WordPress CMS?Apr 08, 2025 am 12:02 AM

WordPress adalah sistem pengurusan kandungan (CMS). Ia menyediakan pengurusan kandungan, pengurusan pengguna, tema dan keupayaan pemalam untuk menyokong penciptaan dan pengurusan kandungan laman web. Prinsip kerja termasuk pengurusan pangkalan data, sistem templat dan seni bina pemalam, sesuai untuk pelbagai keperluan dari blog ke laman web korporat.

Apa yang baik untuk WordPress?Apr 07, 2025 am 12:06 AM

WordpressisgoodforvirtualyWebprojectduetoitsversatilityasacms.itexcelsin: 1) keramahan pengguna, membolehkan mudah

Sekiranya saya menggunakan Wix atau WordPress?Apr 06, 2025 am 12:11 AM

Wix sesuai untuk pengguna yang tidak mempunyai pengalaman pengaturcaraan, dan WordPress sesuai untuk pengguna yang mahukan lebih banyak keupayaan kawalan dan pengembangan. 1) Wix menyediakan editor drag-and-drop dan templat yang kaya, menjadikannya mudah untuk membina sebuah laman web dengan cepat. 2) Sebagai CMS sumber terbuka, WordPress mempunyai ekosistem komuniti dan plug-in yang besar, menyokong penyesuaian dan pengembangan yang mendalam.

Berapakah kos WordPress?Apr 05, 2025 am 12:13 AM

WordPress sendiri adalah percuma, tetapi kos tambahan untuk digunakan: 1. WordPress.com menawarkan pakej dari percuma hingga dibayar, dengan harga dari beberapa dolar sebulan hingga berpuluh -puluh dolar; 2. WordPress.org memerlukan membeli nama domain (10-20 dolar AS setahun) dan perkhidmatan hosting (5-50 dolar AS sebulan); 3. Kebanyakan pemalam dan tema adalah percuma, dan harga berbayar adalah antara berpuluh-puluh dan beratus-ratus dolar; Dengan memilih perkhidmatan hosting yang betul, menggunakan plug-in dan tema yang munasabah, dan mengekalkan dan mengoptimumkan secara teratur, kos WordPress dapat dikawal dan dioptimumkan dengan berkesan.

Adakah WordPress masih percuma?Apr 04, 2025 am 12:06 AM

Versi teras WordPress adalah percuma, tetapi yuran lain mungkin ditanggung semasa penggunaan. 1. Nama domain dan perkhidmatan hosting memerlukan pembayaran. 2. Tema lanjutan dan pemalam boleh dikenakan. 3. Perkhidmatan profesional dan ciri -ciri canggih boleh dikenakan.

Adakah WordPress mudah untuk pemula?Apr 03, 2025 am 12:02 AM

WordPress mudah untuk pemula bermula. 1. Selepas log masuk ke latar belakang, antara muka pengguna adalah intuitif dan papan pemuka mudah menyediakan semua pautan fungsi yang diperlukan. 2. Operasi asas termasuk mencipta dan mengedit kandungan. Editor WYSIWYG memudahkan penciptaan kandungan. 3. Pemula boleh mengembangkan fungsi laman web melalui pemalam dan tema, dan lengkung pembelajaran wujud tetapi boleh dikuasai melalui amalan.

Mengapa ada yang menggunakan WordPress?Apr 02, 2025 pm 02:57 PM

Orang memilih untuk menggunakan WordPress kerana kuasa dan fleksibiliti. 1) WordPress adalah CMS sumber terbuka dengan kemudahan penggunaan dan skalabiliti yang kuat, sesuai untuk pelbagai keperluan laman web. 2) Ia mempunyai tema dan plugin yang kaya, ekosistem yang besar dan sokongan komuniti yang kuat. 3) Prinsip kerja WordPress adalah berdasarkan tema, pemalam dan fungsi teras, dan menggunakan PHP dan MySQL untuk memproses data, dan menyokong pengoptimuman prestasi.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.