Embed Size (px)
DESCRIPTION
Presentation
Citation preview
Concevoir un thème pour wordpress
De A à Z
Avant de commencer…
• <?php ;?>
• DOM ? HTML ? PHP ?
• ÎÍË|ë“‘{∑∆·flÎÍË
http://www.siteduzero.com/tut
oriel-3-13666-apprenez-a-creer
-votre-site-web-avec-html5-et-
css3.
html
Plan
• Introduction
• Le processus
– CSS
– Entête
– Corps du template
– Structurer les fichiers
– Conclusion
A,B,C
• Analyse
• Besoin
• Conception (d‘une maquette)
D à Z
• Développer
• …
• Z : Livrer/Mettre en ligne le template
Objectif du jour
• Concevoir un thème pour wordpress 3.4
– Liste des articles
– Sidebar
–wordpress
• A,B,C - > Slick Gray , par Bryan Smith
– http://www.quackit.com/html/templates/
simple_website_templates.cfm
• Pour gagner du temps, nous ferons
abstraction de l’aspect graphique
– Transformation d’un layout en
html/css/js
• http://hv-designs.co.uk
Kit graphique
Html, css( et
js)
Thème wordpre
ss
Php,css (et js)
Processus
4.Le corps
3.Sidebar
2.L’entête
1.Le CSS
Etape 0
• Créer un dossier contenant les
fichiers du thème
• Dossier /wp-content/themes/
• index.html > index.php
1. LE CSS
/*
Theme Name: Le nom de votre theme
Theme URI: votre site web
Description: une description
Author: vous
Author URI: http://monkeydo.biz
Version: 1
*/
2. L’ENTÊTE
•<!DOCTYPE html>
•<head>
• <!—meta titre--><title><?php bloginfo('name'); ?><?php wp_title(''); ?></title>
•<!—charset--><meta http-equiv="Content-
Type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
• <meta name="generator"
content="WordPress <?php bloginfo('version'); ?
>" />
• <meta name="description" content="<?php
bloginfo('description'); ?>" />
• <link rel="stylesheet" type="text/css"
media="screen" href="<?php
bloginfo('stylesheet_url'); ?>" />
• <!--rss-->
<link rel="alternate"
type="application/rss+xml" title="<?php
bloginfo('name'); ?> RSS Feed" href="<?php
bloginfo('rss2_url'); ?>" />
• <!--url pour les pingback--><link
rel="pingback" href="<?php
bloginfo('pingback_url'); ?>" />
• </head>
2.CORPS DU TEMPLATE
<body>
<div id=“container”>
<div id=“header”></div>
<div id=“menu”></div>
<div id=“leftmenu”></div>
<div id=“contenu”></div>
<div id=“footer”></div>
</div>
</body>
<div id="header">
<h1> <!--nom du blog-->
<?php bloginfo('name');
?></h1>
</div>
Div id=« header »
<body>
<div id=“container”>
<div id=“header”></div>
<div id=“menu”></div>
<div id=“leftmenu”></div>
<div id=“contenu”></div>
<div id=“footer”></div>
</div>
</body>
<div id="menu">
<ul>
<?php
wp_list_categories('title_li=');?>
</ul>
</div>
<body>
<div id=“container”>
<div id=“header”></div>
<div id=“menu”></div>
<div id=“leftmenu”></div>
<div id=“contenu”></div>
<div id=“footer”></div>
</div>
</body>
• Sidebar
–Widgets
– Functions.php
Functions.php<?php
function arphabet_widgets_init() {
register_sidebar( array(
'name' => 'Home right sidebar',
'id' => 'home_right_1',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'arphabet_widgets_init' );
?>
<div id="leftmenu">
<div id="leftmenu_top"></div>
<div id="leftmenu_main">
<ul id="sidebar">
<?php
if (function_exists('dynamic_sidebar') &&
dynamic_sidebar('home_right_1')) :
else :
?>
<?php endif; ?>
</ul>
</div>
<div id="leftmenu_bottom"></div>
</div>
<body>
<div id=“container”>
<div id=“header”></div>
<div id=“menu”></div>
<div id=“leftmenu”></div>
<div id=“contenu”></div>
<div id=“footer”></div>
</div>
</body>
<div id="content">
<div id="content_top"></div>
<div id="content_main">
<!-- boucle. -->
<?php if ( have_posts() ) : while
( have_posts() ) : the_post(); ?>
<!—boucle-->
<?php endif; ?>
<div class="post">
<!-- instruction affichant le titre en tant que permalink,ainsi que
la date. -->
<div id="maintextheader">
<h2 ><a class="style3" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a></h2>
<!-- Display the Time. -->
<div class="datedujour">
<small>
<?php the_time('j F'); ?>
</small>
</div>
</div>
<!-- afficher le contenu du post -->
<div class="entry">
<?php the_content(); ?>
</div>
<!-- categories -->
<p class="postmetadata">Publié dans
<?php the_category(', '); ?>
</p>
</div>
<!-- si pas de posts -->
<?php endwhile; else: ?>
<p>Désolé .Pas de posts
correspondant </p>
<!-- fin de la boucle -->
<?php endif; ?>
</div>
<div id="content_bottom"></div>
<body>
<div id=“container”>
<div id=“header”></div>
<div id=“menu”></div>
<div id=“leftmenu”></div>
<div id=“contenu”></div>
<div id=“footer”></div>
</div>
</body>
<div id="footer"><h3><a
href="http://www.bryantsmith.com">florida
web design</a></h3></div>
</div>
</div>
</body>
</html>
4.STRUCTURER LES FICHIERS
• Code de l’entête - > header.php
• Code du corps -> index.php
– Sidebar ->sidebar.php
• Code du footer -> footer.php
Header
<?php_get header();?>
Sidebar –
<?php_get sidebar();?>
Footer
<?php get_footer()?>
Pour aller un peu plus loin
Créer un carousel
http://www.tutorialstag.com/wordpres
s-featured-posts-using-nivo-
slider.html
Ps : u
