


Tout le processus de création de thème WordPress (5) : création de header.php
Je vous ai présenté "L'ensemble du processus de production d'un thème WordPress (4) : Un petit test". Cet article continue de vous présenter le "Processus complet de production d'un thème WordPress (5) : Création de header.php". regardez-le ensemble. Bar~
Vous pouvez essayer d'utiliser un éditeur de texte pour ouvrir le fichier .html
téléchargé depuis WordPress Theme Production Whole Process (3) : HTML Static Template Production I. je me demande si vous avez trouvé leurs en-têtes. Les codes dans toutes les parties sont très similaires ? En fait, nous pouvons extraire cette partie de code similaire et la mettre dans un fichier séparé header.php
. Lorsque chaque page souhaite utiliser cette partie de code, utilisez le include() Ou incluez le <code>get_header()
de WordPress. Cette partie du code doit être écrite dans chaque page de la province. Si vous la modifiez, vous pouvez atteindre l'objectif de tout changer. .html
文件,不知道你有没有发现他们头部的代码都非常的相似呢?其实我们可以提取这部分相似的代码,放到一个单独的文件header.php
中,各个页面想用这部分代码的时候再用php的include()
或者WordPress的get_header()
包含进去,省的每个页面里面都要写这部分代码,更改起来也可以达到一改全改的目的。
再次提醒:如果你不打算动手编写代码,这个系列教程就别看了,对你无益!
接着我们上次创建的主题目录wp-contentthemesAurelius
,在该目录下新建一个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="logo" class="grid_4">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 class="grid_12 caption clearfix">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
中代码应该是动态,适合不同页面的,所以这里面需要用到PHP代码,而不是单纯的HTML。下面让我们一起来修改header.php
:
1、更改
我们都知道不同页面的title都是不一样,而且title的设置还会直接影响到SEO的效果,所以这里应该谨慎设置。下面提供一种SEO优化的title写法,将<title>Aurelius | Blog</title>
改成:
<title><?php if ( is_home() ) { bloginfo('name'); echo " - "; bloginfo('description'); } elseif ( is_category() ) { single_cat_title(); echo " - "; bloginfo('name'); } elseif (is_single() || is_page() ) { single_post_title(); } elseif (is_search() ) { echo "搜索结果"; echo " - "; bloginfo('name'); } elseif (is_404() ) { echo '页面未找到!'; } else { wp_title('',true); } ?></title>
以上添加的php代码运用了条件判断,针对不同的页面采用不同title,这里解释一下这几个条件标签。
is_home()
:当前页面为主页时返回trueis_category()
:当前页面为分类页时返回trueis_single()
:当前页面为单文章页时返回trueis_page()
:当前页面为单页面时返回true
到目前为止,可能你对这些条件判断标签还没有深入的认识,也搞不懂到底是用了这些标签会对主题造成怎样的影响的,随着我们教程的进一步深入,你会慢慢理解的。如果你不喜欢上面title的写法,可以自行上网搜索相关代码:WordPress SEO title
2、更改样式表style.css路径
在此之前你看到的首页都是混乱的,原因是还没加载css样式。现在我们一起把样式加上。你可以在header.php
中找到这一段代码:
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
聪明的你可能问:wp-contentthemesAurelius
目录下不是已经有一个 style.css
吗?那为什么 header.php
wp-contentthemesAurelius
que nous avons créé la dernière fois, créez un nouveau fichier php header.php
dans ce répertoire et extrayez index.php< Copiez et collez le code d'en-tête dans /code> dans <code>header.php
. Le code suivant est actuellement tout le code de header.php
(bien sûr les en-têtes des différents thèmes). les codes sont tous différents, vous pouvez le personnaliser dans votre projet actuel) : 🎜<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
index.php</code >, <code>archive.php
, contact.php
, full_width.php
, page.php
et single .php
, supprimez le code similaire ci-dessus et remplacez-le par : 🎜🎜<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
get_header()
équivaut à copier le code de header.php
dans le fichier php actuel. Ensuite, nous examinerons de plus près le contenu dynamique dans header.php
. header.php
sera inclus dans toutes les pages de modèles (page d'accueil, pages de catégories, pages, onglets, etc.), donc le code dans header.php
doit être dynamique et adapté pour différentes pages, le code PHP doit donc être utilisé à la place du simple HTML. Modifions header.php
ensemble : 🎜1 Changer
🎜Nous connaissons tous les titres de. les différentes pages sont différentes et le réglage du titre affectera directement l'effet SEO, vous devez donc le définir soigneusement ici. Ce qui suit fournit une méthode d'écriture de titre optimisée pour le référencement. Remplacez <title>Aurelius | Blog</title>
par : 🎜<h1 id="logo" class="grid_4">Aurelius</h1> <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
is_home()
: renvoie vrai lorsque la page actuelle est la page d'accueilis_category()
: renvoie lorsque la page actuelle est une page de catégorie trueis_single()
: renvoie vrai lorsque la page actuelle est une page d'article uniqueis_page()</code > : La page actuelle est une page d'article unique. Renvoie vrai lorsque la page est affichée.</li></ul>🎜Jusqu'à présent, peut-être que vous n'avez pas une compréhension approfondie de ces balises de jugement conditionnel, et vous ne comprenez pas comment l'utilisation de ces balises affectera le thème. Au fur et à mesure que nous progressons dans le didacticiel, vous comprendrez lentement. Si vous n'aimez pas la façon dont le titre est écrit ci-dessus, vous pouvez rechercher le code correspondant en ligne : <code>Titre WordPress SEO
🎜2 Modifiez le. feuille de style style.css path< /strong>
🎜La page d'accueil que vous avez vue auparavant est dans le chaos car le style CSS n'a pas encore été chargé. Ajoutons maintenant les styles ensemble. Vous pouvez trouver ce morceau de code dansheader.php
: 🎜🎜🎜Si vous êtes intelligent, vous pouvez demander :<h1 id="logo" class="grid_4"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> <h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>
Copier après la connexionCopier après la connexionwp- contentthemesAurelius</ N'y a-t-il pas déjà un <code>style.css
dans le répertoire code> ? Alors pourquoiheader.php
ne charge-t-il pas le CSS ? Comme vous pouvez voir le résultat, la page est en désordre et vous pouvez être sûr que le CSS n'est pas chargé. Parce qu'il s'agit d'un thème de WordPress, il doit être appelé par le programme principal de WordPress, et votre blog peut être affiché après des couches d'analyse, plutôt qu'un simple fichier de page Web statique HTML. Modification correcte : 🎜🎜🎜<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php echo get_bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo('comments_rss2_url'); ?>" />
Copier après la connexionCopier après la connexionbloginfo('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
,就可以得到你想要的答案了。如果你需要这个功能,可以在<head>
里面添加以下代码:<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Copier après la connexionCopier après la connexion4、更改博客名称和描述
在
header.php
,下面两行代码用于显示博客名称和描述:<h1 id="logo" class="grid_4">Aurelius</h1> <h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
Copier après la connexionCopier après la connexion上面是静态代码,现在做如下修改:
<h1 id="logo" class="grid_4"><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> <h2 class="grid_12 caption clearfix"><?php bloginfo('description'); ?></h2>
Copier après la connexionCopier après la connexion现在你的博客首页看到的就是你博客名称和描述了,并且logo也是一个链接指向你的博客首页。我们这里说说这些php代码的作用。
<?php echo get_option('home'); ?>
输出你的博客首页网址<?php bloginfo('name'); ?>
输出你的博客名称<?php bloginfo('description'); ?>
输出博客描述
博客名称和描述可以在WordPress管理后台 - 设置 - 常规那里更改。以后制作你自己的WordPress主题的时候,你可参照上面的说明对你的主题进行修改。
5、添加订阅feed链接
相信每个已发布的WordPress博客主题都会提供feed订阅,当然我们的主题也应该提供这样的功能。在
</head>
之前添加以下代码:<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章" href="<?php echo get_bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论" href="<?php bloginfo('comments_rss2_url'); ?>" />
Copier après la connexionCopier après la connexion6、添加wp_head
有些插件需要在网页头部执行一些类如添加一些js或css的动作,要让这些插件能够正常的工作,也让你的主题有更好的兼容性,你应该添加wp_head()函数。打开
header.php
,在</head>
前面添加以下代码即可:<?php wp_head(); ?>
Copier après la connexion现在打开你的博客主页,查看源代码,
</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='index' href='http://ludou.co.tv' /> <meta name="generator" content="WordPress 2.9.2" />
Copier après la connexion7、添加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>
Copier après la connexion改成:
<ul id="navigation" class="grid_8"> <?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?> <li <?php if (is_home()) { echo 'class="current"';} ?>><a title="<?php bloginfo('name'); ?>" href="<?php echo get_option('home'); ?>/">主页</a></li> </ul>
Copier après la connexionLes deux articles suivants présentent comment créer un menu WordPress, vous pouvez également vous référer à :
Comment créer un menu de navigation thématique dans WordPress (1)
-
Comment créer un menu de navigation thématique dans WordPress (2)
9. Actualisez le cache
Ajoutez le code PHP devant
<body>
et après</head>
améliorer l'efficacité de l'exécution du programme :<body>
前面,</head>
后面添加PHP代码,用于提高程序运行效率:<?php flush(); ?>
总结
好了,本次练习到此结束!现在总结一些今天讲到的比较重要的知识点:
-
<?php get_header(); ?>
从当前主题文件夹中包含header.php文件 -
is_home(),is_single(),is_category()
等几个条件判断标签 -
输出主题文件夹中style.css文件的路径
-
<?php bloginfo('pingback_url'); ?>
输出博客pingback网址 -
<?php bloginfo('template_url'); ?>
输出博客主题目录URL -
<?php echo get_option('home'); ?>
输出你的博客首页网址 -
<?php bloginfo('name'); ?>
输出你的博客名称 -
<?php bloginfo('description'); ?>
输出博客描述 -
<?php wp_head(); ?>
用于包含WordPress程序输出头部信息 -
<?php wp_list_categories(); ?>
用于列出博客分类页 -
<?php wp_list_pages(); ?>
用于列出博客页面
到目前为止你的博客还只能看到主页,不要灰心,凡事一步一个脚印,以后教程会慢慢深入的。最后提供经过本次修改后的
Aurelius
主题文件,你可以用文本编辑器打开看看,跟你修改的文件比较比较(尤其是header.php
Résumé
<?php get_header(); ?>
Incluez le fichier header.php du dossier de thème actuelis_home(), is_single(), is_category() et plusieurs autres balises de jugement conditionnel
<?php bloginfo('stylesheet_url'); >
Dossier du thème de sortie Le chemin au fichier style.css dans 🎜🎜<?php bloginfo('pingback_url'); ?>
Afficher l'URL de pingback du blog 🎜🎜<?php bloginfo('template_url') ; ?>
Afficher l'URL du répertoire du thème du blog🎜🎜<?php echo get_option('home'); ?>
Afficher l'URL de la page d'accueil de votre blog🎜🎜< ? php bloginfo('name'); ?>
Afficher le nom de votre blog🎜🎜<?php bloginfo('description'); ?>
Afficher la description du blog🎜🎜<?php wp_head(); ?>
Utilisé pour inclure les informations d'en-tête de sortie du programme WordPress 🎜🎜<?php wp_list_categories( ?>
Utilisé pour répertorier la page de catégorie des blogs 🎜🎜<?php wp_list_pages(); ?>
est utilisé pour lister les pages du blog🎜🎜🎜Jusqu'à présent, votre blog ne peut voir que la page d'accueil, ne vous découragez pas, faites tout en un seul pas à la fois Footprints, les tutoriels seront progressivement approfondis dans le futur. Enfin, le fichier de thèmeAurelius
après cette modification est fourni. Vous pouvez l'ouvrir avec un éditeur de texte et le comparer avec le fichier que vous avez modifié (notammentheader.php
), voir. comment tu l'as changé ? 🎜🎜🎜🎜🎜🎜🎜Apprentissage recommandé : "🎜Tutoriel WordPress🎜"🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

PHP 8.4 apporte plusieurs nouvelles fonctionnalités, améliorations de sécurité et de performances avec une bonne quantité de dépréciations et de suppressions de fonctionnalités. Ce guide explique comment installer PHP 8.4 ou mettre à niveau vers PHP 8.4 sur Ubuntu, Debian ou leurs dérivés. Bien qu'il soit possible de compiler PHP à partir des sources, son installation à partir d'un référentiel APT comme expliqué ci-dessous est souvent plus rapide et plus sécurisée car ces référentiels fourniront les dernières corrections de bogues et mises à jour de sécurité à l'avenir.

Visual Studio Code, également connu sous le nom de VS Code, est un éditeur de code source gratuit – ou environnement de développement intégré (IDE) – disponible pour tous les principaux systèmes d'exploitation. Avec une large collection d'extensions pour de nombreux langages de programmation, VS Code peut être c

Ce tutoriel montre comment traiter efficacement les documents XML à l'aide de PHP. XML (Language de balisage extensible) est un langage de balisage basé sur le texte polyvalent conçu à la fois pour la lisibilité humaine et l'analyse de la machine. Il est couramment utilisé pour le stockage de données et

Une chaîne est une séquence de caractères, y compris des lettres, des nombres et des symboles. Ce tutoriel apprendra à calculer le nombre de voyelles dans une chaîne donnée en PHP en utilisant différentes méthodes. Les voyelles en anglais sont a, e, i, o, u, et elles peuvent être en majuscules ou en minuscules. Qu'est-ce qu'une voyelle? Les voyelles sont des caractères alphabétiques qui représentent une prononciation spécifique. Il y a cinq voyelles en anglais, y compris les majuscules et les minuscules: a, e, i, o, u Exemple 1 Entrée: String = "TutorialSpoint" Sortie: 6 expliquer Les voyelles dans la chaîne "TutorialSpoint" sont u, o, i, a, o, i. Il y a 6 yuans au total

JWT est une norme ouverte basée sur JSON, utilisée pour transmettre en toute sécurité des informations entre les parties, principalement pour l'authentification de l'identité et l'échange d'informations. 1. JWT se compose de trois parties: en-tête, charge utile et signature. 2. Le principe de travail de JWT comprend trois étapes: la génération de JWT, la vérification de la charge utile JWT et l'analyse. 3. Lorsque vous utilisez JWT pour l'authentification en PHP, JWT peut être généré et vérifié, et les informations sur le rôle et l'autorisation des utilisateurs peuvent être incluses dans l'utilisation avancée. 4. Les erreurs courantes incluent une défaillance de vérification de signature, l'expiration des jetons et la charge utile surdimensionnée. Les compétences de débogage incluent l'utilisation des outils de débogage et de l'exploitation forestière. 5. L'optimisation des performances et les meilleures pratiques incluent l'utilisation des algorithmes de signature appropriés, la définition des périodes de validité raisonnablement,

Si vous êtes un développeur PHP expérimenté, vous aurez peut-être le sentiment d'y être déjà allé et de l'avoir déjà fait. Vous avez développé un nombre important d'applications, débogué des millions de lignes de code et peaufiné de nombreux scripts pour réaliser des opérations.

Liaison statique (statique: :) implémente la liaison statique tardive (LSB) dans PHP, permettant à des classes d'appel d'être référencées dans des contextes statiques plutôt que de définir des classes. 1) Le processus d'analyse est effectué au moment de l'exécution, 2) Recherchez la classe d'appel dans la relation de succession, 3) il peut apporter des frais généraux de performance.

L'accès au fichier du site WordPress est restreint: dépannage de la raison pour laquelle le fichier .txt ne peut pas être accessible récemment. Certains utilisateurs ont rencontré un problème lors de la configuration du nom de domaine commercial du programme MINI: � ...
