Tutoriale Web Design, Wordpress si SEO

In prima parte v-am explicat ce fisiere contintine o tema wordpress si cateva legaturi dintre acestea:

PARTEA II: Header.php intr-o tema wordpress

Structura de baza a unei teme wordpress

• Header - header.php
• Sidebar/Menu - sidebar.php
• Content - index.php, single.php, page.php, category.php, author.php, search.php, etc.
• Footer - footer.php

Header

Header-ul, in principiu, are aceasi structura ca orice alta pagina web. Poate contine meta tags, titlul, banner, meniu etc

In tema Clasica header-ul are urmatorul cod:

pana la charset’); ?>” /> nu v-as sfatui sa modificati ceva.

Titlul Blogului

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

Spre exemplu blogul meu ptr pagina din arhiva Validare fisiere CSS va avea titlul: „<title>Tutoriale Web Design &raquo; Validare fisiere CSS</title>”

Alte exemple de a afisa numele blogului este

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

Aici in schimb titlul va fi „<title>Tutoriale Web Design  &raquo; Blog Archive   &raquo; Validare fisiere CSS</title>”

Un cod mai complex ar fi urmatorul:

<title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) {
single_cat_title(); echo " - "; bloginfo('name');
} elseif (is_single() || is_page() ) {
single_post_title();
} elseif (is_search() ) {
bloginfo('name'); echo " search results: "; echo wp_specialchars($s);
} else { wp_title('',true); }
?></title>

In care se specifica daca este home page (is_home) sa apara numele blogului.Daca suntem la categorie(is_category) sa apara denumirea categoriei in titlu si apoi numele blogului. Daca am ajuns deja la pagina post in titlu va aparea doar denumirea post-ului respectiv. Daca se face cautarea (is_search) va aparea denumirea blogului urmat de cuvantul cheie cautat (exemplu <title>Tutoriale Web Design search results: tutoriale</title>).

Urmatorul rand ar fi bine sa nu fie scos

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
Si asta pentru ca ajuta la contorizarea blogurilor ce ruleaza folosind platforma wordpress

Va trebui apoi sa introduce fisierele externe, precum cel css sau javascript, exemplu

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/nav.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/print.css" type="text/css" media="print" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/dropdowns.js"></script>

Ar trebui introduse si feed-urile si pingback
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

Sau

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
Si
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Header-ul se va inchide cu

<?php wp_head(); ?>
</head>

In functie de ce plugin-uri folositi si ce alte functii vreti sa aveti puteti introduce in header:

Arhiva

<?php wp_get_archives('type=monthly&format=link'); ?>

Daca nu folositi plugin ptr SEO aveti varianta fie de a fi preluate meta tag-urile automat din blog (Options- General)
<meta name="keywords" content="<?php bloginfo('description'); ?>" />
<meta name="description" content="<?php bloginfo('description'); ?>" />

Fie de a le completa voi
<meta name="homedesc" content="Descrierea blog-ului vostru" />
<!--PLEASE FILL-->
<meta name="keywords" content="Cuvintele cheie pentru blog-ul vostru" />
<!--PLEASE FILL-->
<meta name="robots" content="index,follow" />
<!--PLEASE FILL-->
<meta name="author" content="Numele vostru" />
<!--PLEASE FILL-->
<meta name="description" content="o descriere scurta cam de un rand" />

Iconita din adresa URL

<link rel="icon" href="<?php bloginfo('stylesheet_directory');?>/favicon.ico" type="images/x-icon" />

Asta a fost partea de sursa dupa care urmeaza Design-ul header-ului. Acum vine partea mai frumoasa si mai interesantasi depinde de fiecare template cum are facut CSS-ul.

In tema clasica arata

<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div id="content">
<!-- end header -->

Iar in tema default

<body>
<div id="page">
<div id="header">
  <div id="headerimg">
  <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
  <div class="description"><?php bloginfo('description'); ?></div>
  </div>
</div>
<hr />

Un exemplu mai complex de la o alta tema

<body>
<div id="body-container">
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><span><?php bloginfo('name'); ?></span></a></h1><!-- UNCOMMENT THIS TO PUT AN AD IN THE HEADER OF YOUR SITE

Cateva explicatii sunt necesare pentru a va descurca cu header-ul

• <?php bloginfo('name');?> va arata numele blogului asa cum este pus in panoul administratorului la Options - General;
• <?php bloginfo('description');?> va afisa ceea ce se numeste in panoul admin “Tagline”;
• <?phpbloginfo(’show’);?> afiseaza informatii despre blog, in general cele puse de voi in User Profile si General Options din WordPress Administration panels.

Pentru a afisa caracterele folosite in blog (ex: utf-8)

<p>Character set: <?php bloginfo('charset'); ?> </p>

Paramatrii

show 

(string) Informatii detaliate despre blog. Valid values:

• ‘name’ - Titlu blog ; setat in General Options. (Default)
• ‘description’ - Tagline; setat in General Options.
• ‘url’ - URL blogului.
• ‘rdf_url’ - URL pentru RDF/RSS 1.0 feed.
• ‘rss_url’ - URL pentru RSS 0.92 feed.
• ‘rss2_url’ - URL pentru RSS 2.0 feed.
• ‘atom_url’ - URL pentru Atom feed.
• ‘comments_rss2_url’ - - URL pentru comentarii RSS 2.0 feed.
• ‘pingback_url’ - - URL pentru Pingback (XML-RPC file).
• ‘admin_email’ - E-mail-ul administratorului setat in General Options.
• ‘charset’ - Character encoding ale blogului; setat in Reading Options.
• ‘version’ - Versiunea WordPress blog folosita.
• ‘html_type’ - “Content-type”.
• ‘wpurl’ - - URL pentru WordPress instalare.
• ‘template_url’ - - URL pentru tema folosita.
• ‘template_directory’ - - URL pentru directorul temei.
• ’stylesheet_url’ - - URL pentru fisierul CSS primar .
• ’stylesheet_directory’ - - URL pentru directorul stylesheet. (Deprecated in 2.3.1)