LP_TD_WP.md

Structure d'un template

Chaque template est divisé au moins en 3 parties réutilisables dans tous les templates :

L'en-tête ( header )
Le contenu principal ( content )
le pied de page ( footer )

Les élements cités correspondent à des fragments de template que l'on inclus dans le template principal.

//repertoire_web/site_worpdress/wp-content/themes/mon_theme/index.php
<?php get_header(); ?>
<?php get_template_part('content'); // 'content' -> indique la présence du template "content.php" ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Un template peut aussi contenir d'autres éléments comment une ou plusieurs barres latérales ( sidebar ), un formulaire de recherche, une zone de commentaires, une zone de navigation entre articles ( art. précédents et suivants ).

Un thème est donc susceptible de contenir les fichiers suivants :

index.php
header.php
content.php
footer.php
sidebar.php
style.css
functions.php

le header

<html>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
	<div id="page" class="hfeed site">
		<header id="masthead">

			<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

			<div id="navbar" class="navbar">
				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
					<?php 
						wp_nav_menu( array( 
							'theme_location' => 'primary', 
							'menu_class' => 'nav-menu' ) 
							); 
					?>
					<?php get_search_form(); ?>
				</nav><!-- #site-navigation -->
			</div><!-- #navbar -->
		</header><!-- #masthead -->
		<div id="main" class="site-main">

Le contenu principal

Il contient ce qu'on appelle la "Boucle", qui liste tous les contenes à afficher. Si on se trouve sur une page listant tous les articles d'une même catégorie, cette boucle renverra une liste d'éléments, si on se trouve sur un article seul ou une page, cette boucle renverra une liste avec un seul éléments. Elle est utilisée dan tous les cas de figure.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<?php endwhile; else : ?>
	<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 <div class="post">
 
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 
  <small><?php the_time('F jS, Y'); ?></small>
 
  <div class="entry">
    <?php the_content(); ?>
  </div>

  <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
 </div> <!-- fin du premier bloc div -->

<?php endwhile; else : ?>
	<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

le footer

  </div> <!-- #main -->
  </body>
  <script>...</script>
  </html>

Marqueur de templates

ce sont des raccourcis utilent utilisables depuis les templates. Une liste exhaustive regroupée par catégories est disponible dans la documentation en ligne de Wordpress

<?php bloginfo( $show ); ?>

charset              = UTF-8
description          = Just another WordPress blog
siteurl              = http://www.example.com/home (DEPRECATED! use url option instead)
url                  = http://www.example.com/home
wpurl                = http://www.example.com/home/wp

 get_template_directory_uri() 
 get_stylesheet_directory_uri() (for the child template directory).

Les marqueurs conditionnels :

Ils s'utilisent également dans les templates et fournissent des conditions pratiques l'affichage ou la mise en forme de contenu en fonction de certaines conditions.

//Page d'accueil du site ?
if ( is_front_page() && is_home() ) {
  // La page d'accueil par défaut
} 

//Un article unique ( et non un page unique ) ?
if(is_single()){
}

//Un page ( et non un article ) ?
if(is_page()){
}

//Catégorie de l'article en cours
if(in_category( array( 'F1', 'F2', 'F3' ) ){
}

//Page catégorie / archive ?
if(is_category()){
}

//Une certaine catégorie ?
if(is_category('rock')){
}

Liens

Afficher les champs personnalisés :

<?php 
	$data_concert = get_post_meta(get_the_id(), 'date_concert' ); 
	if(!empty($date_concert)):
		//121012016
		$str = preg_replace('/(\d{2})(\d{2})(\d{4})/i', '$3$2$1', $date_concert);
		$date = DateTime::createFromFormat('dmY', $str);
	?>
	<div>
		<span class="date-concert day"><?php echo $date->format('d') ?></span>
		<span class="date-concert month"><?php echo $date->format('m') ?></span>
	/div>
?>

Il est préférable d'insérer ce code dans un fragment de template nommé postmeta-concert.php et appeler ce fragment de template avec la fonction *get_template_part'.

	get_template_part('postmeta-concert');

Activer la navigation principale

Nous avons déjà abordé la notion de fonctionnalités des thèmes ( theme features ) proposées par WP et qui sont activables lors de la création du nouveau thème.

Le menu de navigation fait partie de ces fonctionnalités, vous devez donc l'activer :

function my_theme_setup() {

	add_theme_support( 'post-thumbnails' ); 

	register_nav_menu( 'primary', __( 'Navigation Menu', 'my_theme' ) );
	/*
	 * This theme uses a custom image size for featured images, displayed on
	 * "standard" posts and pages.
	 */
	add_theme_support( 'post-thumbnails' );
	
}
//cette action intervient une fois que WP a determiné le thème à activer
add_action( 'after_setup_theme', 'twentythirteen_setup' );

Ensuite, dans le fichier header.php, vous devrez ajouter le tag suivant en vous aidant de cet exemple : [header.php] (https://github.com/WordPress/WordPress/blob/master/wp-content/themes/twentythirteen/header.php)

  <?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>

Notez la présence des marqueurs de template : bloginfo(), wp_title(), wp_head()... Vous devrez les intégrez à votre fichier header.php.

Ajouter de nouvelles fonctionnalités :

function my_theme_setup() {

	add_theme_support( 'post-thumbnails' ); 

	//set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)
        //add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
        
        
	register_nav_menu( 'primary', __( 'Navigation Menu', 'my_theme' ) );
	/*
	 * This theme uses a custom image size for featured images, displayed on
	 * "standard" posts and pages.
	 */

	$args = array(
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption'
	);
	add_theme_support( 'html5', $args );

}

Création d'un nouveau type de contenu 'Annonce' ou 'Concert'.

function my_theme_init(){

register_post_type(
  'annonce',
  array(
    'label' => 'Annonces',
    'labels' => array(
      'name' => 'Annonces',
      'singular_name' => 'Annonce',
      'all_items' => 'Toutes les annonces',
      'add_new_item' => 'Ajouter une annonces',
      'edit_item' => "Éditer l'annonces",
      'new_item' => 'Nouvelle annonce',
      'view_item' => "Voir l'annonce",
      'search_items' => 'Rechercher parmi les annonces',
      'not_found' => 'Aucune annonce trouvée',
      'not_found_in_trash'=> 'Pas d'annonce dans la corbeille'
      ),
    'public' => true,
    'capability_type' => 'post',
    'supports' => array(
      'title',
      'editor',
      'thumbnail'
    ),
    'has_archive' => true
  )
);

}
add_action('init', 'my_theeme_init');

Création du template 'archives' avec pagination

Ce template va lister toutes les annonces publiées ou tous les concerts à venir. Ce qu'il faut :

Pour les concerts : filtrer la requête pour n'afficher que les concerts à venir :). A faire un peu plus tard,
Une boucle pour afficher la liste des resultats,
une pagination si plusieurs pageq de résultats.

Boucle

Adapter cette boucle :

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 	<!-- Display the Title as a link to the Post's permalink. -->

 	<h2>
 		<a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
 			<?php the_title(); ?>
 		</a>
 	</h2>

 	<!-- Display the Post's content in a div box. -->
 	<div class="entry">
 		<?php the_content(); ?>
 	</div>

 	<!-- Display a comma separated list of the Post's Categories. -->
 	<p class="postmetadata">
 		<?php _e( 'Posted in' ); ?> <?php the_category( ', ' ); ?>
 	</p>

 	<!-- Stop The Loop (but note the "else:" - see next line). -->

 <?php endwhile; else : ?>

 	<!-- The very first "if" tested to see if there were any Posts to -->
 	<!-- display.  This "else" part tells what do if there weren't any. -->
 	<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>

 	<!-- REALLY stop The Loop. -->
 <?php endif; ?>

pagination

Vous pouvez reprendre le conde suivant :

global $wp_query;

$big = 999999999; // need an unlikely integer

echo paginate_links( array(
	'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'format' => '?paged=%#%',
	'current' => max( 1, get_query_var('paged') ),
	'total' => $wp_query->max_num_pages
) );

Liens

Requête personnalisée avec l'object WP_Query

Filtre par catégorie

// WP_Query arguments
$args = array (
	'category_name'          => 'F3',
);
$query = new WP_Query( $args );

Filtre par champs personnalisés

Valeur numérique

// WP_Query arguments
$args = array (
	'category_name'          => 'F3',
	'meta_query'             => array(
		array(
			'key'       => 'price',
			'value'     => '500',
			'compare'   => '<=',
			'type'      => 'NUMERIC',
		),
	),
);

// The Query
$query = new WP_Query( $args );

Intervalle de dates

The 'type' DATE works with the 'compare' value BETWEEN only if the date is stored at the format YYYY-MM-DD and tested with this format.

// WP_Query arguments
$args = array (
	'meta_query'             => array(
		array(
			'key'       => 'date_debut',
			'value'     => array('2016-01-01','2016-02-01'
			'compare'   => 'BETWEEN',
			'type'      => 'DATE',
		),
	),
);

// The Query
$query = new WP_Query( $args );

Exemple de boucle avec utilisation de WP_Query

<?php 

$args = array (
	'category_name'          => 'F3',
);

$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

	<!-- the loop -->
	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
		<h2><?php the_title(); ?></h2>
	<?php endwhile; ?>
	<!-- end of the loop -->


	<?php wp_reset_postdata(); ?>

<?php else : ?>
	<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

le template

add_action('template_include', 'advanced_search_template');
function advanced_search_tmpl( $template ) {
    if ( isset( $_REQUEST['search'] ) && $_REQUEST['search'] == 'advanced' && is_search() ) {
        $t = locate_template('advanced-search-template.php');
        if ( ! empty($t) ) {
            $template = $t;
        }
    }
    return $template;
}

Liens

Moteur de recherche personnalisé

Un template searchform.php contient le formulaire de recherche. Il est possible de modifier le formulaire par défaut, ou bien en créer un de toute pièce. Dans le premier cas, la fonction *get_search_form() * permets d'inclure ce fragment de template.

le formulaire de recherche

<form role="search" method="get" id="searchform" action="http://www.test.dev/">
<div>
<label for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="hidden" value="500" name="price" />
<input type="hidden" value="f3" name="type" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

la requête

add_action( 'pre_get_posts', 'advanced_search_query' );
function advanced_search_query( $query ) {

    if ( isset( $_REQUEST['search'] ) && $_REQUEST['search'] == 'advanced' && ! is_admin() && $query->is_search && $query->is_main_query() )
    {

        $query->set( 'post_type', 'vehicle' );

        $_model = $_GET['model'] != '' ? $_GET['model'] : '';

        $meta_query = array(
                array(
                    'key'     => 'car_model', // assumed your meta_key is 'car_model'
                    'value'   => $_model,
                    'compare' => 'LIKE', // finds models that matches 'model' from the select field
                )
            )
        );
        $query->set( 'meta_query', $meta_query );

    }
}

Liens

https://codex.wordpress.org/Class_Reference/wpdb

rccc/LP_TD_WP.md

Select an option

No results found

Select an option

No results found

Structure d'un template

le header

Le contenu principal

le footer

Marqueur de templates

Les marqueurs conditionnels :

Liens

Afficher les champs personnalisés :

Activer la navigation principale

Ajouter de nouvelles fonctionnalités :

Création d'un nouveau type de contenu 'Annonce' ou 'Concert'.

Création du template 'archives' avec pagination

Boucle

pagination

Liens

Requête personnalisée avec l'object WP_Query

Filtre par catégorie

Filtre par champs personnalisés

Valeur numérique

Intervalle de dates

Exemple de boucle avec utilisation de WP_Query

le template

Liens

Moteur de recherche personnalisé

le formulaire de recherche

la requête

Liens