WordPressテーマ作成全工程(5)：header.phpの作成-＆＃＆プレス-php.cn

ホームページ

CMS チュートリアル

＆＃＆プレス

WordPressテーマ作成全工程(5)：header.phpの作成

青灯夜游

Feb 21, 2023 am 10:21 AM

phpwordpress

「WordPressテーマ制作の全工程(4)：ちょっとしたテスト」でご紹介しましたが、今回は引き続き「WordPressテーマ制作の全工程(5)：ヘッダーの作成」をお届けします。 .php" を一緒に見てみましょう~

WordPress テーマの制作プロセス (3): HTML 静的テンプレートからダウンロードした

.html をテキストエディターで開いてみることができます。 Production ファイルのヘッダー内のコードが非常に似ていることに気づいたでしょうか?実際、同様のコードのこの部分を抽出して、別のファイル header.php に置くことができます。各ページでコードのこの部分を使用したい場合は、php の include()## を使用します。 # または WordPress の get_header() が含まれており、この部分のコードを州内のすべてのページに記述する必要があります。これを変更すると、完全な変更を行う目的を達成できます。 もう一度思い出してください:

コードを書く予定がない場合は、この一連のチュートリアルを読まないでください。役に立ちません。

次に、前回作成したテーマディレクトリ wp-content\messages\Aurelius

に新しい php ファイル

header.php を作成し、抽出します# コピー##index.php のヘッダーコードを header.php に貼り付けます。次のコードは、現在 header.php にあるすべてのコードです (もちろんテーマは異なります)。コードはすべて異なり、実際のプロジェクトでカスタマイズできます):

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

次に、テキストエディタを使用して

index.php

、

archive.php を開きます。

、contact.php、full_width.php、page.php、および single.php、上記の同様のコードを削除し、次のように変更します:

<?php get_header(); ?>

さて、テストブログのホームページを開いて、作成したテーマが引き続き正常に機能するかどうかを確認します。答えは「はい」です。同じですが、それでも混乱しています。

get_header()

は、

header.php

のコードを現在の PHP ファイルにコピーすることと同じです。次に、header.php の動的コンテンツを詳しく見ていきます。 header.php はすべてのテンプレートページ (ホームページ、カテゴリページ、ページ、タグページなど) に含まれるため、header.php のコードは動的で適切なものである必要があります。したがって、ここでは単純な HTML ではなく PHP コードを使用する必要があります。 header.php:1. <title></title>

を変更しましょう。ページごとにタイトルが異なることは誰もが知っています。タイトルの設定もSEO効果に直結するので、ここは慎重に設定する必要があります。以下は、SEO に最適化されたタイトルの書き方です。Aurelius | Blog を

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

に変更します。上記で追加した PHP コードは、条件判断を使用して、さまざまなコンテンツをターゲットにします。ページでは異なるタイトルが使用されています。ここでは、いくつかのコンディショナルタグについて説明します。

is_home()

: 現在のページがホームページである場合に true を返します。

is_category(): 現在のページがホームページである場合に true を返します。カテゴリページです
is_single(): 現在のページが単一の記事ページである場合に true を返します。
is_page(): 次の場合に true を返します。現在のページは 1 つのページです
これまでのところ、おそらくこれらの条件判定タグについて深く理解しておらず、これらのタグの使用がテーマにどのような影響を与えるかを理解していません。チュートリアルが進んでいくと、より深く理解できるようになります。上記のタイトルの書き方が気に入らない場合は、オンラインで関連するコードを検索できます: WordPress SEO title

2. の style.css パスを変更します。スタイルシート

これまでは、CSS スタイルが読み込まれていないため、表示されたホームページは混乱していました。次に、スタイルを一緒に追加しましょう。このコードは header.php にあります:

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

賢明な方は、次のように尋ねることもできます:

wp-content\themes\Aurelius

ディレクトリには

style.css

がすでに存在していませんか?では、なぜ header.php は CSS を読み込まないのでしょうか?結果を見るとわかるように、ページは乱雑になっており、CSS が読み込まれていないことがわかります。これは WordPress のテーマであるため、WordPress のメインプログラムから呼び出す必要があり、単純な HTML 静的 Web ページファイルではなく、何層もの分析を経てブログを表示できます。正しい変更:

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

<p><code>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，在前面添加以下代码即可：

<?php wp_head(); ?>

现在打开你的博客主页，查看源代码，前面是不是多了以下类似代码（这些都是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>

WordPress のメニューの作成方法については、次の 2 つの記事で紹介しています。

WordPress テーマのナビゲーションメニューの作成方法 (1)## も参照してください。
#WordPress でテーマナビゲーションメニューを作成する方法 (2)

9. キャッシュを更新する

プログラムの実行効率を向上させるために、

の前と の後に PHP コードを追加します:

概要

さて、この演習は終了です。ここで、今日述べたより重要な知識ポイントのいくつかを要約します:

現在のテーマフォルダーから header.php ファイルをインクルードします
およびその他のいくつかの条件判定タグ
テーマフォルダー内の style.css ファイルへのパスを出力します。
ブログのピンバック URL を出力します
出力ブログテーマディレクトリ URL

ブログ名を出力します
出力ブログの説明
WordPress プログラムの出力ヘッダーを含めるために使用されます。部門情報
ブログカテゴリページのリストに使用されます

Aurelius

テーマファイルが提供されます。テキストエディタで開き、変更したファイル (特に header.php) と比較できます。あなたがやって？

推奨学習: 「

WordPress チュートリアル

」

以上がWordPressテーマ作成全工程(5)：header.phpの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は露兜即刻で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

WordPressは、CMSとして使用するためにコーディングの知識が必要ですか？Apr 30, 2025 am 12:03 AM

WordPressを使用するためにプログラミングの知識は必要ありませんが、プログラミングをマスターするとエクスペリエンスが向上する可能性があります。 1）CSSとHTMLを使用して、テーマスタイルを調整します。 2）PHPの知識は、トピックファイルを編集して機能を追加できます。 3）カスタムプラグインとメタタグはSEOを最適化できます。 4）更新の問題を防ぐために、サブトピックのバックアップと使用に注意してください。

WordPressを使用する際のセキュリティ上の考慮事項は何ですか？Apr 29, 2025 am 12:01 AM

tosecureawwordpresssite、soflowthesesteps：1）定期的にwordpresscore、themes、およびpluginstopatchvulnerabilities.2）usestrong、usestrong、usestrong、sonsandenabletototothentication.3）optformanagedagedwordpresshosting arehoredhoredhoredhored hosting withebapplicationfirewaal

WordPressは他のWebサイトビルダーとどのように比較されますか？Apr 28, 2025 am 12:04 AM

wordpressexexexexexcelsoverwebsitebuildersduetoits ffficability、scalability、andopen-sourcenature.1）それは、aversatilecmswitextensive sustomizationoptionsviathemesandplugins.2）その学習中心部のスチッピアベッタービューターフルフルフルフルフルフルフルカンセーズ。3）

2025年に開発者が使用できる5つのWordPressプラグインApr 27, 2025 am 08:25 AM

2025年のウェブサイト開発のための7つの必須ワードプレスプラグイン 2025年に一流のWordPress Webサイトを構築するには、速度、応答性、およびスケーラビリティが必要です。これを効率的に達成することは、しばしば戦略的なプラグインの選択にかかっています。この記事Highlig

WordPressは何のために使用しますか？Apr 27, 2025 am 12:14 AM

wordpresscanbeusedpurposesbeyondblogging.1）e-ocommerce：withwoocommerce、itcanbecomeafulloninestore.2）メンバーシップサイト：Pluginslikememberpressenable clusivecontentareas.3）ポートフォリオソイト：ThemeslikeasieasiestraololowStunnningStunnningStunnningStunnningStuntunnneDayOutssuntunnneaTuntunnnedrayOutuntuntuntunnnedraySuts

WordPressはポートフォリオWebサイトを作成するのに適していますか？Apr 26, 2025 am 12:05 AM

はい、wordpressisexcellentforcreatingportfoliowebsite.1）itoffers numersportfolio cilems like'astra'astra'foreasycustomization.2）プラグインエレメントレメントレディングの装飾、思想的な態度環境を

Webサイトをゼロからコーディングする上でWordPressを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AM

wordpressisadvasteousovercodingawebsitefromscratchdueto：1）easeofuseandfasterdevelopment、2）柔軟性と吸収性、3）strongCommunitySupport、4）組み込みインセンアンドマークティングツール、5）費用対効果、6）レシュリティアップデート

WordPressがコンテンツ管理システムになっている理由は何ですか？Apr 24, 2025 pm 05:25 PM

wordpressisacmsduetoitseaseaseofuse、customization、usermanagement、seo、andcommunitysupport.1）ofssextensiveationization throughthemesandplugins.3）ofsiscontensiveativeizationization withintentmanagement withintententmanagement with inting ustomization.3）revisustusersandpermissions.4）拡張型を提供します

See all articles