Jak nie zaginąć w nagłówkach

Określenie „nagłówek” w kontekście strony internetowej i WordPressa nie jest jednoznaczne.

Podstawowe (a przynajmniej najczęściej wspominane) to zapewne plik nagłówka motywu i nagłówek strony w jej kodzie.

Innym interesującym zwłaszcza przy optymalizacji stron jest nagłówek http wysyłany przez serwer. Jest jeszcze nagłówek motywu w pliku definiującym motyw (style.css) i nagłówek wtyczki w głównym pliku wtyczki.

Plik nagłówka motywu

Plik o nazwie header.php to element który zazwyczaj zawiera miejsce w którym są wywoływane:

  1. metadane strony opisujące jej zawartość, autora, kontrolujące zachowanie casche, dopuszczające (lub nie) roboty indeksujące
  2. linki prowadzące do kanału RSS, arkuszy stylów, java scriptów,ładowanie fontów itd.
  3. osadzone java skrypty i wpisane style css
  4. elementy odpowiedzialne za wyświetlenie bannera strony (logo, grafika, nazwa strony i tekst opisujący)
  5. elementy typu sidebar (na potrzeby osadzenia menu czy widgetów)

Nagłówek strony

Kod widoczny miedzy znacznikami <head> a </head> widoczny w podglądzie źródła strony (ctrl+u w firefox czy chrome). Zawiera elementy opisane w punkcie 1, 2 i 3 powyżej.

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
<title>WPomoc – Pomoc przy WordPressie</title>
<meta name='robots' content='noindex,follow' />
 <script type="text/javascript">
 var ajaxurl = 'https://www.wpomoc.pl/wp-admin/admin-ajax.php';
 </script>
 <link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link href='https://fonts.gstatic.com' crossorigin rel='preconnect' />
<link rel="alternate" type="application/rss+xml" title="WPomoc » Kanał z wpisami" href="https://www.wpomoc.pl/feed/" />
 <style type="text/css">
img.wp-smiley,
img.emoji {
 display: inline !important;
 border: none !important;
 box-shadow: none !important;
 height: 1em !important;
 width: 1em !important;
 margin: 0 .07em !important;
 vertical-align: -0.1em !important;
 background: none !important;
 padding: 0 !important;
}
</style>
<link rel='stylesheet' id='bcct_style-css' href='https://www.wpomoc.pl/wp-content/plugins/better-click-to-tweet/assets/css/styles.css?ver=3.0' type='text/css' media='all' />
<link rel='stylesheet' id='wp-blocks-css' href='https://www.wpomoc.pl/wp-content/plugins/gutenberg/blocks/build/style.css?ver=1507988798' type='text/css' media='all' />
<link rel='stylesheet' id='twentyseventeen-fonts-css' href='https://fonts.googleapis.com/css?family=Libre+Franklin%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C800%2C800i&subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='twentyseventeen-style-css' href='https://www.wpomoc.pl/wp-content/themes/twentyseventeen/style.css?ver=4.8.2' type='text/css' media='all' />
<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyseventeen-ie8-css' href='https://www.wpomoc.pl/wp-content/themes/twentyseventeen/assets/css/ie8.css?ver=1.0' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='query-monitor-css' href='https://www.wpomoc.pl/wp-content/plugins/query-monitor/assets/query-monitor.css?ver=1507212606' type='text/css' media='all' />
<link rel='stylesheet' id='codecolorer-css' href='https://www.wpomoc.pl/wp-content/plugins/codecolorer/codecolorer.css?ver=0.9.12' type='text/css' media='screen' />
<!--[if lt IE 9]>
<script type='text/javascript' src='https://www.wpomoc.pl/wp-content/themes/twentyseventeen/assets/js/html5.js?ver=3.7.3'></script>
<![endif]-->
<script type='text/javascript' src='https://www.wpomoc.pl/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://www.wpomoc.pl/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='https://www.wpomoc.pl/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.wpomoc.pl/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://www.wpomoc.pl/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.8.2" />
<meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett" />
<link type="text/plain" rel="author" href="https://www.wpomoc.pl/humans.txt" />
</head>

Nagłówek odpowiedzi serwera

Fragment komunikacji pomiędzy przeglądarką a serwerem na którym jest udostępniona strona www. Jego podgląd mówi bardzo wiele na temat optymalizacji czasu ładowania strony. W nagłówkach tych można zobaczyć status pobrania każdego elementu z którego jest zbudowana strona. Widać czy transmisja się powiodła, czy została poddana kompresji, kiedy plik ma być ponownie pobrany jeśli jest włączone cashowanie. Widać też czy są zdefiniowane ciasteczka, jaka jest wersja serwera, kodowanie znaków, wersja php i inne dane udostępniane przez serwer jak np. X-Clacks-Overhead: GNU Terry Pratchett

Set-Cookie: start=R118888684; path=/; expires=Sun, 22-Oct-2017 17:00:53 GMT
Date: Sun, 22 Oct 2017 15:43:12 GMT
Server: Apache
X-Powered-By: PHP/7.0.17
X-Clacks-Overhead: GNU Terry Pratchett
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Cache-Control: no-cache, must-revalidate, max-age=0
Link: <https://www.wpomoc.pl/wp-json/>; rel="https://api.w.org/", <https://www.wpomoc.pl/?p=91>; rel=shortlink
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 39886
Content-Type: text/html; charset=UTF-8
X-IPLB-Instance: 5238

Nagłówki w style.css i wtyczkach

Nagłówki te są napisane jako komentarze w pierwszych liniach pliku. Służą do przekazania silnikowi WordPressa informacji na  temat motywu czy wtyczki (nazwa, autor, numer wersji itd.) dzięki czemu jest on w stanie wyświetlić te informacje w spisie motywów i spisie wtyczek. Ponadto na podstawie numeru wersji WordPress podejmuje decyzję czy taka wtyczka lub motyw wymaga aktualizacji czy nie.

Przykładowy nagłówek w pliku style.css opisujący motyw

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Przykładowy nagłówek opisujący wtyczkę

<?php
/**
 * Plugin Name
 *
 * @package     PluginPackage
 * @author      Your Name
 * @copyright   2016 Your Name or Company Name
 * @license     GPL-2.0+
 *
 * @wordpress-plugin
 * Plugin Name: Plugin Name
 * Plugin URI:  https://example.com/plugin-name
 * Description: Description of the plugin.
 * Version:     1.0.0
 * Author:      Your Name
 * Author URI:  https://example.com
 * Text Domain: plugin-name
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

Przydatne:

Wątek w QA: Rodzaje nagłówków mogących się pojawić podczas rozmowy o WordPressie

Podobne wpisy