Creare un tema wordpress partendo dall' Html / Css


(vedi anche
http://wp.tutsplus.com/tutorials/theme-development/developing-your-first-wordpress-theme-day-2-of-3/
)

Un esempio di un sito minimale senza immagini

Materiale Base


server xampp / php / my sql

installazione WP






1)

struttura dei files del tema WP

è un cartella nella directory wp-content/themes

sono necessari almeno due files

1) index.php

2) style.css

il file per la schermata

3) screenshot.png (non è obbligatorio)

si divide il contenuto della pagina in più files PHP che si riuniscono insieme con l'inclusione "lato server"

cioè Wordpress ricostruisce i files componendo i pezzetti di codice html e php

NB: sintassi di base di php
http://php.html.it/guide/lezione/2639/php-e-lhtml/


files PHP

  • index.php - racchiude in genere il contenuto (loop wp) e richiama gli files necessari
  • single.php
  • page.php
  • comments.php
  • functions.php
  • header.php - racchiude la parte iniziale della pagina html (tipicamente anche le chiamate ai js e css)
    • contiene anche la barra di navigazione principale
    • contiene la chiamata al modulo di ricerca
  • footer.php
    • elementi di copyright / colophon
    • può avere delle aree con widget
  • sidebar.php
    • sempre totalmente personalizzabile con una o più aree widget

questa struttura (di files) non è fissa ma ampiamente personalizzabile

NB: c'è una convenzione per i nomi delle pagine


stile CSS
  • style css



commento nella parte iniziale
    /*
    Theme Name: Nome del tema
    Theme URI: http://www.
    Description:Descrizione
 
    Author: nome dell'autore
    Version: 0.1
    Tags: minimalistic, simple, widgets, sidebar, typography
    */


separare header.php e footer.php

primo index.php

<?php get_header(); ?>
 
<?php get_footer(); ?>


la funzione bloginfo
http://codex.wordpress.org/Function_Reference/bloginfo


bloginfo('stylesheet_url');

bloginfo('stylesheet_directory');

bloginfo('name');

mettere la chiamata al css

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css">
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
    <!--[if IE]>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
    <![endif]-->



sistemare il titolo di pagina co wp_title

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

vedi codex

http://codex.wordpress.org/Function_Reference/wp_title




Il LOOP

esempio sul codex di wordpress
http://codex.wordpress.org/The_Loop



Esempi di informazioni nei post

the_title()
the_tags()
the_ID()
the_category()
the_date()
the_content()
elenco completo http://codex.wordpress.org/Template_Tags#Post_tags)


codice tipo

<div class="post">
        <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
        <div class="post-details">
            <div class="post-details-left">
                Scritto il <strong><?php the_date(); ?></strong> da <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span>
                </div>
                <div class="post-details-right">
<?php edit_post_link('Modifica', '<span class="comment-count">  ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span>
</div>
        </div>
 
        <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
                <?php the_excerpt(); ?>
        <?php else : ?>
                <?php the_content('Read More'); ?>
        <?php endif; ?>
 
    </div><!-- post -->



vedi il loop



NAVIGAZIONE


versione semplice usando la funzione wp_list_pages()

<ul id="nav"><!-- barra navigazione -->
 
  <li><a href="<?php bloginfo('url') ?>">home</a></li>
  <?php wp_list_pages('title_li='); ?>
 
  </ul>
 
 



<?php wp_nav_menu(array( 'menu' => 'mainnav',
'menu_class' => 'nav-bar-content', 'menu_id' => 'nav',
'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>
 




menu – The desired menu
menu_class – The CSS class to be used
menu_id – The UL element ID - nav
container – Whether or not to wrap the list
theme_location – The location of the menu within the theme (for multiple menus)
show_home – Whether or not to display a ‘Home’ link


codice per il menu programmabile







functions.php


<?php
    if ( function_exists('register_sidebar') )
        register_sidebar(array(
        'name' => 'sidebar',
        'before_widget' => '<div class="sidebar-box">',
        'after_widget' => '</div>',
        'before_title' => '<span class="sidebar-title">',
        'after_title' => '</span><div class="dots"></div>',
    ));
?>