Adaptation Thème Pitr
menu administrateur > Mise en page > Modèles > Modèles à adapter > Adaptation Thème Pitr
Ci-dessous, je vais copier/coller le code HTML de la page de démo de Pitr. Comme ça on s'épargne la compréhension du PHP à la sauce Wordpress, on fait juste du sélectionner/remplacer.
Je vais commencer à adapter le modèle, en mettant en rouge ce que j'enlève, et en vert ce que j'ajoute.
Mitra, Labo et les autres : n'hésitez pas à mettre des questions et commentaires dans le code. (choisissez une couleur)
Mitra : en
violet ce que j'ajoute et en
violet ce que je retire.
jlb : je réserve ce
vert pour mes interventions
Stéphane : j'avais déjà pris le
bleu, je passe tes commentaires en
rose.-> Code repris du code de goofy -- Mitra
smartcomment Le modèle de mise en page Pitr ... blablabla
-> je ne sais pas encore l'endroit où ce commentaire apparaît -- Mitra
-> dans le menu modèles > options -- Stéphane
smartimage title_banner_source 2048 120 http://utilisateurs.viabloga.com/images/pitr.title_banner_source.jpg Bannière de titre : image de 2048x120 pixels (redimensionnée automatiquement si nécessaire)
-> Banière à ajouter parmi les images. Mais pourquoi sur le site des utilisateurs ?
-> c'est juste l'image par défaut, on peut la mettre ailleurs.
smartoption columns "Position de la colonne principale" radio right_right "A gauche" left_right "Au milieu" left_left "A droite"
-> ca c'est l'option configurable avec un bouton radio dans le menu modele > options
smartcolor background --à définir-- Couleur de fond au milieu (texte)
smartcolor text --à définir-- Couleur du texte
smartcolor title --à définir-- Couleur du titre du weblog
smartcolor link --à définir-- Couleur des liens
smartcolor link_highlight --à définir-- Couleur des nouveaux liens
smartcolor bar --à définir-- Couleur des lignes horizontales
smartblock sb.1 "Bloc configurable 1" session index
smartblock sb.2 "Bloc configurable 2" active_summaries all
smartblock sb.3 "Bloc configurable 3" search all
smartblock sb.4 "Bloc configurable 4" archive_months index
smartblock sb.5 "Bloc configurable 5" none index
smartblock sb.6 "Bloc configurable 6" none index
smartblock sb.7 "Bloc configurable 7" none index
smartblock sb.8 "Bloc configurable 8" none index
smartblock sb.9 "Bloc configurable 9" none index
smartblock sb.10 "Bloc configurable 10" none index
-> Faut-il prendre le thème et mettre dans le Bloc configurable 1 "Catégorie" et dans le bloc configurable 2 "Blogroll"
-> je dissèque chaque colonne :
smartblock -> on va définir un nouveau bloc configurable, qui sera visible dans le menu choix des blocs
sb.1 -> a chaque type de bloc, des macros sont associées. Ainsi chaque bloc a un code de début et un code de fin.
sb est le type du bloc et le préfixe des macros, .1 est juste une façon de dire qu'il y a plusieurs blocs de ce type.
"Bloc configurable 1" est l'intitulé affiché dans le menu choix des blocs
session est le bloc par défaut affiché à cet endroit (ici une boite de Session)
index est l'indication du type des pages où ce bloc par défaut est affiché, ici toutes les pages de sommaires des articles
(la page principale, les pages des rubriques, les résultats de recherche dans les articles)
smartblock sb.1b "Bloc extreme 1" calendar index
smartblock sb.2b "Bloc extreme 2" last_comments index
smartblock sb.3b "Bloc extreme 3" none index
smartblock sb.4b "Bloc extreme 4" none index
smartblock sb.5b "Bloc extreme 5" none index
smartblock sb.6b "Bloc extreme 6" none index
smartblock sb.7b "Bloc extreme 7" none index
smartblock sb.8b "Bloc extreme 8" none index
smartblock sb.9b "Bloc extreme 9" none index
smartblock sb.10b "Bloc extreme 10" none index
-> Quelle différence entre "Bloc configurable" et "Bloc extreme" ?
-> Est-ce tout simplement le bloc le plus à gauche et le bloc le plus à droite ?
-> Oui, à l'origine avait deux colonnes à droite : une à droite et l'autre à l'extrème droite.
Depuis, Goofy permet aussi des configurations plus centristes, voire même une coalition de gauche et d'extrême gauche.
Un meilleur nom peut-être : "Bloc gauche 1" et "Bloc droit 1"
smartblock sb_menu "Menu (onglets) - doit être une liste" categories all
smartblock sb.top "Bloc central au dessus des articles 1" none index
smartblock sb.top2 "Bloc central au dessus des articles 2" none index
-> Que veut dire les deux arguments "none" et "index" ?
-> none est le type du bloc par défaut, ici aucun bloc.
pragma niutopia_do_not_display_face_in_comments
pragma html_escape_ampersands
pragma html_quote_urls
pragma html_remove_wrap_virtual_in_textareas
pragma html_best_effort_xhtml
pragma html_remove_empty_table_cells
-> a quoi servent les pragma ?
-> excellente question. ;-) ils permettent de choisir certaines options:
pragma niutopia_do_not_display_face_in_comments
-> les nouveaux modeles spécifient où exactement les images des commentateurs
sont affichées. Pour les anciens, cette ligne n'est pas là, et ils sont affichés
directement dans l'attribut 'text' des commentaires.
pragma html_escape_ampersands
-> transforme & en & (pour faire du XHTML)
pragma html_quote_urls
-> transforme <a href=http://truc> en <a href="http://truc"> (idem)
pragma html_remove_wrap_virtual_in_textareas
-> pareil c'est pour transformer de l'html en xhtml
pragma html_best_effort_xhtml
-> pareil, ca va faire quelques vérifications dans le code pour qu'il soit plus valide.
pragma html_remove_empty_table_cells
-> ca c'est une astuce qui permet d'enlever <td></td>. c'est pratique pour la gestion
des colonnes configurables : si une colonne est vide (aucun bloc sélectionné), on peut
carrément l'enlever.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="alternate" type="application/rss+xml" title="Themes Demo RSS Feed<SITE_TITLE> (RSS)" href="http://demo.jauhari.net/?feed=rss2/index.xml" />
<link rel="pingback" href="http://demo.jauhari.net/xmlrpc.php" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://demo.jauhari.net/xmlrpc.php?rsd" />
<title>
Themes Demo|
Just another WordPress weblog</title>
<title><SITE_AND_OR_NEWS_TITLE></title>
-> <SITE_AND_OR_NEWS_TITLE> est remplacé par le titre du site, de l'article ou du texte
<meta name="generator" content="WordPress 2.1.3" />
<link rel="stylesheet" href="http://demo.jauhari.net/wp-content/themes/Pitr/style.css" type="text/css" media="screen" />
-> sur ViaBloga, pour l'instant, les styles sont directement inclus dans le modèle,
j'ai donc recopié le contenu de style.css ci-dessous, dans un bloc <style type="text/css">..</style>
<style type="text/css">
/*
Theme Name: Pitr
Theme URI: http://www.jauhari.net/themes/pitr
Description: Pitr is 3 Coloum Layout that build with little bit icon and some color blending effect and Custom Header.</p> <p>Please Note <a href="http://meidell.dk/threadedcomments/">Brian's Threaded Comments</a> must enable to make Comment work, or if you want remove it? just replace comments.php with file from default theme.</p> <p>Visit the <a href="http://www.jauhari.net/themes/pitr">Theme Page</a>.</p><p>Please Note This is Sponsored Themes</p><p>The CSS, XHTML and design is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></p>
Version: 2.1
Author: Nurudin Jauhari
Author URI: http://www.jauhari.net/
This theme was designed and built by Nurudin Jauhari,
whose blog you will find at http://www.jauhari.net/themes/pitr
Crafted on 20 -23 March 2007
Last Edit: 23 April 2007
The CSS, XHTML and design is released under a Creative Commons Attribution 3.0 License:
http://creativecommons.org/licenses/by/3.0/
*/
/* Social Style
********************* */
html
{
height: 100%;
margin-bottom: 0.1em;
overflow-y: scroll;
}
*
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
p
{
line-height: 1.6em;
margin: 0.7em 0;
}
dl
{
margin: 1em 0;
}
dt
{
font-weight: bold;
}
dd
{
margin: 0.5em;
padding: 0;
}
img.right
{
float: right;
margin: 10px 0 0 10px;
}
img.left
{
float: left;
margin: 0 10px 10px 0;
}
hr
{
display: none;
}
body
{
background: #f3f3f3 url(images/bgr/public_images/skins/pitr/bgr.jpg) left bottom repeat-x;
background-attachment: fixed;
color: #444;
font: 76%/1.6em verdana, tahoma, arial, sans-serif;
margin: 0 0 30px;
padding: 0;
text-align: center;
}
a
{
text-decoration: none;
}
a:link, a:visited
{
color: #bf1016;
}
a:hover, a:active
{
border-bottom: #963 1px solid;
}
h1, h2, h3, h4, h5, h6
{
font-family: Georgia, Verdana, Arial, Serif;
}
/* Main Design
********************* */
#pager
{
background: #666;
border-bottom: 2px solid #666;
height: 10px;
margin: 0;
padding: 0;
}
#page
{
background: #fff;
border-top: 4px solid #d1261e;
margin: 0 auto;
padding: 0 0 20px;
position: relative;
text-align: left;
width: 950px;
}
* html #page
{
width: 950px;
}
#header
{
background: #F6D530 url(images/headr.jpg/public_images/skins/pitr/headr.jpg) right top no-repeat;
border-bottom: 1px solid #d1261e;
height: 150px;
margin: 0 0 10px;
padding: 0;
position: relative;
}
#headr
{
padding-right: 20px;
padding-top: 55px;
text-align: right;
}
#headr h1
{
font-size: 2.7em;
margin: 0;
padding: 0;
}
#headr h1 a
{
color: #d1261e;
text-decoration: none;
border: none;
}
#headr .description
{
color: #ff5e0d;
}
#content
{
float: right;
padding-right: 20px;
width: 480px;
}
#sidebar
{
float: left;
width: 420px;
}
#footer
{
clear: both;
color: #999;
margin-bottom: 20px;
padding: 10px 0;
}
#footer a
{
color: #666;
}
#footer
{
background: transparent;
clear: both;
margin: 0 auto;
text-align: left;
width: 940px;
}
html #footer
{
height: 1%;
}
#footer p
{
float: left;
line-height: 1.2em;
width: 55%;
}
#footer p.right
{
color: #999;
float: right;
font-size: 0.9em;
margin: 1em 0;
text-align: right;
width: 40%;
}
#header, #content, #sidebar, #footer
{
overflow: hidden;
}
/* Sidebar Style
********************* */
#sidebar ul
{
list-style: none;
margin: 0;
padding: 0;
}
#sidebar .about
{
margin-bottom: 20px;
margin-left: 20px;
text-align: right;
}
#sidebar .about h2
{
border-bottom: 1px solid #ccc;
}
.about p.stats
{
border-bottom: 1px solid #ccc;
margin-top: 10px;
border-top: 1px solid #ccc;
color: #999;
background: url(images/pink_star.png) right center no-repeat;
font-size: 0.9em;
padding-right: 14px;
}
#sidebar .iright
{
float: right;
padding-left: 10px;
}
#sidebar .about p
{
padding-left: 10px;
}
#sidebar h2
{
font-size: 1.4em;
font-weight: normal;
margin: 0;
padding: 0;
}
.side1
{
background: url(images/side1r.gif/public_images/skins/pitr/side1r.jpg) top right no-repeat;
border-right: 1px solid #9dcdff;
float: left;
text-align: right;
width: 200px;
}
.side1 a
{
color: #0d60b6;
}
.side1 .linkcat,.side1 .widget, .side1 .categories, .side1 .donasi, .side1 .mylogr
{
padding: 10px;
}
.side1 .widget_calendar {
}
.side1 .mylogr
{
text-align: left;
}
.side1 .donasi a
{
border: 0;
}
.side1 .donasi div
{
padding-top: 10px;
}
.side1 .linkcat h2, .side1 .archive h2, .side1 h2
{
background: url(images/side1h2r.gif/public_images/skins/pitr/side1h2r.jpg) top right no-repeat;
text-align: right;
}
.side2
{
float: right;
width: 200px;
}
.side2 .boxr, .side2 .widget
{
background: #c2eeff;
border: 1px solid #6dcff6;
margin-bottom: 20px;
padding: 10px;
}
.side2 .widget:hover, .side2 .boxr:hover
{
background: #b0e4f8;
border: 1px solid #6dcff6;
margin-bottom: 20px;
padding: 10px;
}
.side2 .widget a, .side2 .boxr a
{
color: #227190;
}
.side2 #emploan
{
background: #e3fbbf;
border: 1px solid #e3fbbf;
margin-bottom: 20px;
padding: 10px;
}
.side2 #emploan a
{
border: none;
color: #005e20;
text-decoration: none;
}
.side2 #emploan:hover
{
border: 1px solid #9bc65b;
}
.side2 .sb-latest h2, .side2 .archive h2
{
color: #790000;
}
.side2 .latest
.side2 .box2
{
background: #efefef;
margin-bottom: 20px;
padding: 10px;
}
/* Post Style
********************* */
h2.pagetitle
{
border-bottom: 1px solid #ccc;
font-family: arial, verdana;
font-size: 1.8em;
font-weight: normal;
margin-bottom: 20px;
text-align: right;
text-transform: uppercase;
}
.post
{
border-bottom: 1px dashed #ccc;
margin-bottom: 20px;
}
.post h2
{
margin: 0;
padding: 0;
font-family: Arial, san-serif;
font-weight: normal;
}
.post h2 a
{
text-decoration: none;
}
.post h2 a:hover
{
text-decoration: underline;
}
p.postmetadata
{
color: #999;
font-size: 85%;
margin-bottom: 10px;
}
p.postmetadata a
{
color: #666;
text-decoration: none;
}
span.timr
{
background: url(images/timr.png/public_images/skins/pitr/timr.jpg) 0 0 no-repeat;
padding-left: 15px;
}
span.catr
{
background: url(images/catr.png/public_images/skins/pitr/catr.jpg) 0 0 no-repeat;
padding-left: 15px;
}
span.editr
{
background: url(images/editr.png/public_images/skins/pitr/editr.jpg) 0 0 no-repeat;
padding-left: 15px;
}
span.commr
{
background: url(images/commr.png/public_images/skins/pitr/commr.jpg) 0 0 no-repeat;
padding-left: 15px;
}
/* Uncomment to make Uato
.post a img, .post img {
border: none;
float: left;
padding-right: 5px;
}
*/
.post ul {
margin-left: 35px;
}
.post ol {
margin-left: 40px;
}
.navigation
{
}
.navigation a
{
color: #666;
}
.alignleft
{
float: left;
width: 46%;
padding-left: 16px;
background: url(images/arrow-left.png/public_images/skins/pitr/arrow-left.jpg) 0 50% no-repeat;
}
.alignright
{
float: right;
text-align: right;
width: 46%;
padding-right: 16px;
background: url(images/arrow-right.png/public_images/skins/pitr/arrow-right.jpg) right 50% no-repeat;
}
.arsip h2
{
margin: 0;
padding: 0;
}
.arsip ul
{
list-style: none;
margin: 0;
padding: 0;
}
#category_cloud
{
margin-bottom: 20px;
}
ul.srgr strong
{
font-family: Arial, Verdana;
font-size: 1.6em;
font-weight: normal;
}
/* Top Navigation Style
********************* */
#navr
{
font-family: Trebuchet MS,Tahoma, Verdana, Serif;
text-align: left;
overflow: hidden;
position: relative;
width: 950px;
margin: 0;
margin: 0 auto 10px;
padding: 0 0 5px;
}
html #navr
{
height: 1%;
}
#navr ul li
{
float: left;
list-style: none;
margin: 0 5px 0 0;
}
#navr ul li a
{
color: #333;
letter-spacing: 0px;
text-decoration: none;
font-weight: bold;
display: block;
background: #ccc;
border: #666 1px solid;
border-top: none;
padding: 2px 10px;
}
#navr ul li a:hover {
color: #fff;
background: #999;
border: #333 1px solid;
border-top: none;
}
#navr ul li a:active, #navr ul li.current_page_item a
{
color: #fff;
background: #666;
border: #fff 1px solid;
border-top: none;
}
#navr ul li.search
{
font-size: 0.9em;
position: absolute;
right: 0;
top: 5px;
}
#navr ul li.search input#sr {
padding: 3px;
}
#navr ul li.search input#submitr
{
background: #999;
border: #333 1px solid;
color: #fff;
font-size: 0.9em;
margin: 0 0 0 2px;
padding: 2px;
}
/* ETC and FOrm Style
********************* */
.clear
{
clear: both;
height: 20px;
}
fieldset
{
border: none;
}
textarea
{
width: 100%;
}
br.both
{
clear: both;
}
.wp-smiley, #wpstats
{
background: none;
border: 0;
padding: 0;
}
blockquote
{
background: url(images/blockquote.gif/public_images/skins/pitr/blockquote.jpg) no-repeat left top;
color: #666;
margin: 1em;
padding: 0 0 10px 50px;
}
#content .commentsfeedr
{
background: url(images/feed.png/public_images/skins/pitr/feed.png) no-repeat left center;
padding-left: 20px;
}
#content .trackbackr
{
background: url(images/arrow_refresh.png) no-repeat left center;
padding-left: 20px;
}
input.textbox, textarea
{
background: #fff url(images/shadow_top.gif/public_images/skins/pitr/shadow_top.gif) repeat-x top;
border: #ccc 1px solid;
font: 1em Verdana, Arial, Serif;
padding: 2px;
}
input.textbox:focus, textarea:focus
{
background: #fff url(images/shadow_top.gif/public_images/skins/pitr/shadow_top.gif) repeat-x top;
border: #999 1px solid;
}
#submit
{
padding: 3px 5px;
}
.comment
{
background: #fff url(images/shadow_top.gif/public_images/skins/pitr/shadow_top.gif) repeat-x top;
border-bottom: #ddd 1px solid;
list-style: none;
margin: 0;
padding: 1em 0.5em;
}
.alt
{
background: #f9f9f9;
}
.MyAvatars
{
border: 1px solid #ccc;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
float: right;
margin-left: 5px;
margin-right: 10px;
padding: 3px;
}
pre {
width: 95%;
overflow:auto;
font: 13px 'Courier New', Courier, Verdana, Arial, sans-serif;
color: #666;
max-height: 350px;
line-height: 18px;
margin: 10px 0;
border: 1px solid #ccc;
padding: 5px;
background: #efefef;
}
code {
font: 13px 'Courier New', Courier, Verdana, Arial, sans-serif;
color: #999;
padding: 2px;
}
/* Change Log ***
1.0 : Initial Public Released
1.1 - 1.4 : Fix Some Minnor Problem
1.5 : Made better Top Navigation
1.6 : Make Little bit change on Navigation Post
1.7 : Change About Text from manual to generate from <php the_author_description(); ?> thanks for http://xiando.livelyblog.com/ to give this great Idea
1.7a : Fix Minnor Bugs
2.1 : CHange License from GPL to Creative Commons Attribution 3.0 License:
*/
#header {
background: #F6D530 url(http://demo.jauhari.net/wp-content/themes/Pitr/images/headr.jpg) right top no-repeat;
-> on remplacera celà plus tard par une image configurable.
border-bottom: 1px solid #d1261e;
height: 150px;
margin: 0 0 10px;
padding: 0;
position: relative;
}
}
#headr h1 a , #headr .description {
color: #d1261e;
}
</style>
</head>
<body>
<div id="pager"> </div>
<div id="navr">
-> ci-dessous, ce sont les onglets.
<ul class="menu">
<li class="current_page_item"><a href="http://demo.jauhari.net/" title="Home">Home</a></li>
<li class="page_item"><a href="http://demo.jauhari.net/?page_id=2" title="About">About</a></li>
<li class="page_item"><a href="http://demo.jauhari.net/?page_id=7" title="Sample Pages">Sample Pages</a></li>
<li class="page_item"><a href="http://demo.jauhari.net/?page_id=8" title="Another Page">Another Page</a></li>
<li class="page_item"><a href="http://demo.jauhari.net/?page_id=9" title="My Pages">My Pages</a></li>
<li class="search">
<form method="get" id="searchform" action="http://demo.jauhari.net">
<input type="text" class="textbox" value="" name="s" id="sr" />
<input type="submit" id="submitr" value="Search" />
</form>
</li>
</ul>
-> On va remplacer tout ça par un bloc (code copié/collé depuis Goofy) :
-> les définitions des macros
<define_macro name="sb_menu_list_start">
<ul class="menu">
</define_macro>
<define_macro name="sb_menu_list_end">
</ul>
</define_macro>
<define_macro name="sb_menu_text">
<li class="page_item <arg name="selected">"><arg name="text"> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_menu_link">
<li class="page_item"><a href="<arg name="url">"><arg name="text"></a> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_menu_link_link">
<li class="page_item"><a href="<arg name="url1">" class="internal"><arg name="text1"></a> : <a href="<arg name="url2">" class="internal"><arg name="text2"></a> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_menu_link_text">
<li class="page_item"><a href="<arg name="url1">"><arg name="text1"></a> : <arg name="text2"> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_menu_anything">
<arg name="anylist">
</define_macro>
-> l'appel du smartblock :
<smartblock sb_menu>
</div>
<div id="page">
<div id="header">
<div id="headr">
<h1><a href="http://demo.jauhari.net/">
Themes Demo </a>
<a href="/" title="Retour à la page principale"><SITE_TITLE></a></h1>
<div class="description">
Just another WordPress weblog
<SITE_DESCRIPTION>
</div>
</div>
</div>
<hr />
<div id="content" class="narrowcolumn">
-> c'est la colonne principale, on ajoute l'affichage des messages, textes etc.
<object class=error_message>
<div class="post">
<p><attribute text></p>
<attribute html>
</div>
</object>
<object class=message>
<div class="post">
<p><attribute text></p>
<attribute html>
</div>
</object>
<object class=text>
<div class="post">
<if_attribute title!=><h2><attribute title></h2></if_attribute>
<a href="<attribute print_url>" title="Version imprimable" target="_blank"><img src="/public_images/icon_print.gif" border="0" alt="Version imprimable"/></a>
<p><attribute text></p>
<attribute html>
</div>
<attribute cmd>
</object>
<object class=form>
<div class="post" style="background-color:white; border:5px solid #<smartcolor background>; padding:10px;">
<h2><attribute title></h2>
<attribute html>
<attribute textarea_toolbar>
</div>
</object>
<object class=archive>
<div class="post">
<h2><attribute month_year_string></h2>
<h3><attribute nb_news_string></h3>
<p>Trier par : <attribute sort_by_date>, <attribute sort_by_title></p>
<ul>
<object class=archive_entry count=100000>
<li><attribute date_and_title_and_link></li>
</object>
</ul>
</div>
</object>
<object class=list>
<div class="post"
<h2><attribute title></h2>
<attribute html>
<attribute cmd>
</div>
</object>
-> les articles commencent ici, il va falloir ajouter la boucle sur les articles,
en repèrant bien où est fermée le <div class="post"> pour y mettre la fin de la boucle.
-> Le mieux est de prendre goofy.html dans une autre fenêtre pour voir les correspondances.
<!-- définition des sommaires, c'est à dire de la page principale et des pages de rubriques -->
<object class=summaries>
<!-- seuls les 10 derniers articles sont affichés sur une page -->
<object class=summary count=16>
<div class="post" id="post-<attribute news_id>">
<h2><a href="http://demo.jauhari.net/?p=6" rel="bookmark" title="Permanent Link to Duo modus causae fabulas ea">
Duo modus causae fabulas ea </a></h2>
-> On garde la même structure que ci-dessus, en ajoutant juste les classes "hreview" et "url fn" nécessaires pour les votes.
<if_attribute rating==1>
<div class="post hreview">
<h2><a class="url fn" href="<attribute news_url>" rel="bookmark" title="Lien permanent">
</if_attribute>
<if_attribute rating!=1>
<div class="post">
<h2><a href="<attribute news_url>" rel="bookmark" title="Lien permanent">
</if_attribute>
<attribute title></a></h2>
-> Ajout du sous-titre qui n'existait pas dans le modèle d'origine.
<if_attribute sub_title!=><h3><attribute sub_title></h3></if_attribute>
<p class="postmetadata"><span class="timr">
Published April 24th, 2007
Publié le <attribute published_t>
</span>
<span class="catr">in dans
<a href="http://demo.jauhari.net/?cat=5<attribute category_url>" title="View all posts in ListRubrique <attribute category>" rel="category tag">List<attribute category></a> </span> |
<span class="commr">
<a href="http://demo.jauhari.net/?p=6#comments" title="Comment on Duo modus causae fabulas ea">3 Comments »</a>
<a href="<attribute news_url>#comments">
<if_attribute nb_comments=0>0 commentaires </if_attribute><if_attribute nb_comments=1>1 commentaire</if_attribute>
<if_attribute nb_comments!<1><attribute nb_comments> commentaires</if_attribute></a>
</span></p>
<div class="entry">
<p>Sit no copiosae indoctum. Malis indoctum conceptam an pro, qui ocurreret vituperata te. Est animal atomorum pertinacia ea, velit sonet mea ei, mediocrem similique usu ad. Eam in modo deterruisset, pri aperiri feugiat pertinacia te, hinc modus expetendis eum in.</p>
<ul>
<li>Duo modus causae fabulas ea</li>
<li>Sit no copiosae indoctum</li>
<li>mediocrem similique usu ad</li>
</ul>
<p>Duo modus causae fabulas ea, mea nisl impetus bonorum at. Vix libris antiopam at. Ad mel wisi imperdiet. Et vis minim scripta deseruisse, ei simul evertitur intellegebat his, cu dicta facilisi praesent per.</p>
<p>Decore utamur nominavi duo ne, in persius repudiare nec. Possim aliquip in usu, vis homero persius id. Et aliquando forensibus pri, et eos soluta propriae. No eum putant quaeque, et eam solum eleifend referrentur. No agam possim consetetur his, ius alii appellantur no, nonumy platonem eam ei. Vis eu eros graeco maiestatis, ex qui theophrastus interpretaris.</p>
<ol>
<li>Nonumy platonem eam ei</li>
<li>Graeco maiestatis</li>
<li>No agam possim consetetur his</li>
<li>No eum putant quaeque</li>
</ol>
<p>Quis honestatis eu eum, detraxit perpetua qui ut. Pro cu utroque temporibus. Ea antiopam delicata qui. Docendi percipit nominati vis at, ex pri nostro alterum, et soluta ceteros assentior mea.</p>
<if_attribute rating==1>
<attribute rating_bar>
</if_attribute>
<p><attribute text>
<attribute cmd></p>
<p> <a href="http://demo.jauhari.net/?p=6#more-6" class="more-link">Read the rest of this entry »</a></p>
</div>
<p class="postmetadata">
<a href="<attribute author_url>"><attribute author_signature></a>
<a href="<attribute print_url>" title="Version imprimable" target="_blank"><img src="/public_images/icon_print.gif" border="0" alt="Version imprimable"/></a>
<if_attribute text_follows==true><a href="<attribute news_url>" title="Lire la suite"><strong>Suite de l'article ...</strong></a></if_attribute>
<if_attribute text_follows!=true><a href="<attribute news_url>">Permalien</a></if_attribute>
<if_attribute page_views!=> | Lu <attribute page_views> fois</if_attribute>
</p>
</div>
-> le blog d'exemple comporte plusieurs articles, on peut effacer les suivants :
<div class="post" id="post-5">
<h2><a href="http://demo.jauhari.net/?p=5" rel="bookmark" title="Permanent Link to Donec mattis quam a nunc">
Donec mattis quam a nunc </a></h2>
<p class="postmetadata"><span class="timr">Published
April 24th, 2007 </span>
<span class="catr">in
<a href="http://demo.jauhari.net/?cat=4" title="View all posts in Code" rel="category tag">Code</a> </span> |
<span class="commr">
<a href="http://demo.jauhari.net/?p=5#comments" title="Comment on Donec mattis quam a nunc">1 Comment »</a> </span></p>
<div class="entry">
<p>Maecenas facilisis erat vitae massa. Nam ipsum. Nam semper, orci quis porta dapibus, risus urna scelerisque pede, ac iaculis mi magna eu arcu. Fusce dui quam, ullamcorper quis, hendrerit non, vestibulum eu, justo. Aenean bibendum neque sit amet ante. Sed quis enim. Sed elit dui, laoreet vel, tincidunt vitae, tincidunt eget, est. Vestibulum et ligula. Nunc quis nulla. Suspendisse potenti. Mauris eget odio. Donec diam risus, malesuada sit amet, tincidunt a, ultricies et, orci. Sed est dolor, pharetra et, sodales et, suscipit ut, massa. Mauris at velit cursus risus condimentum imperdiet. Nullam convallis. Cras rutrum vestibulum lectus. Nulla erat ante, nonummy at, laoreet a, semper ac, libero.</p>
<p><code>Donec mattis quam a nunc. Etiam convallis justo vel odio. Ut sed lectus. Morbi molestie, quam et viverra euismod, nisi eros gravida ipsum, placerat aliquet mi magna in elit. Vivamus ut ipsum nec erat venenatis posuere. Sed dui leo, porta vitae, pellentesque at, porttitor at, eros. Sed nibh libero, placerat sed, sodales in, dignissim non, diam. Fusce neque nisl, porta in, venenatis venenatis, accumsan mollis, libero. Ut consequat. In hac habitasse platea dictumst. Donec sit amet ante. Sed eget erat. Morbi in mauris. Integer malesuada pretium eros. Morbi urna orci, interdum vitae, malesuada non, ultricies ac, leo. Nulla auctor tempus arcu. Ut blandit facilisis elit. Vestibulum eget metus.<br />
</code><br />
Aliquam vel arcu sit amet purus pulvinar consequat. Aliquam erat volutpat. Praesent tristique tincidunt metus. Morbi enim erat, viverra ac, dictum non, eleifend vel, lectus. Pellentesque metus arcu, convallis eget, pulvinar at, bibendum non, nibh. Nam tempor commodo nisi. Proin vitae magna id augue sagittis tristique. Mauris ac odio. Cras id dui eu elit hendrerit vestibulum. Nullam convallis luctus lectus. Proin aliquam dui nec nunc. Aenean consectetuer iaculis diam. Sed in dolor at eros ultricies pharetra. Quisque egestas dapibus libero.</p>
</div>
</div>
<div class="post" id="post-4">
<h2><a href="http://demo.jauhari.net/?p=4" rel="bookmark" title="Permanent Link to Mauris suscipit sem id sapien.">
Mauris suscipit sem id sapien. </a></h2>
<p class="postmetadata"><span class="timr">Published
April 24th, 2007 </span>
<span class="catr">in
<a href="http://demo.jauhari.net/?cat=3" title="View all posts in Ipsum" rel="category tag">Ipsum</a> </span> |
<span class="commr">
<a href="http://demo.jauhari.net/?p=4#comments" title="Comment on Mauris suscipit sem id sapien.">1 Comment »</a> </span></p>
<div class="entry">
<p>Vestibulum at sapien. Donec eu tellus a eros vulputate aliquam. Cras nec felis at metus ultrices scelerisque. Integer sit amet nunc quis velit porttitor faucibus. Nulla scelerisque elementum sapien. Mauris tincidunt. Nulla sit amet nisl. Aliquam lectus quam, volutpat sit amet, lobortis sed, mattis nec, erat. Integer purus. Vivamus quam nisl, egestas in, tempus et, aliquam ut, lorem. Vivamus mollis pulvinar nibh. Duis viverra placerat purus. Duis ornare quam eget neque. Etiam id urna nec nisi lobortis viverra. Fusce a sem ut sem dictum tempus.</p>
<blockquote><p>Duis congue vestibulum leo. Sed odio lectus, tristique viverra, tempus quis, dapibus sed, leo. Mauris ultricies, ipsum vel vehicula egestas, libero nunc fringilla turpis, sit amet laoreet lacus nunc vel mauris. Duis ante metus, eleifend nec, viverra in, consectetuer ac, turpis. In ac velit. Nulla varius leo quis quam. Sed dictum mattis eros. Nam est ligula, vehicula at, lobortis condimentum, commodo a, sapien. Proin viverra, sapien sit amet rutrum vehicula, orci lorem tempus magna, ut pulvinar neque purus a pede. Suspendisse tincidunt varius est. Sed vulputate suscipit urna. Maecenas faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p></blockquote>
<p>Phasellus ante erat, sagittis at, dignissim a, lobortis in, dui. Etiam at elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin libero orci, consectetuer sit amet, commodo nec, convallis ac, nunc. Ut lectus eros, posuere in, scelerisque eget, vulputate semper, diam. Sed orci massa, sagittis vitae, eleifend et, porta vitae, leo. Nam nonummy. Fusce vitae diam eget metus bibendum dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse tempus orci et mauris. Sed ac massa sit amet nisl pulvinar sagittis.</p>
</div>
</div>
<div class="post" id="post-3">
<h2><a href="http://demo.jauhari.net/?p=3" rel="bookmark" title="Permanent Link to Lorem Ipsum comes from sections">
Lorem Ipsum comes from sections </a></h2>
<p class="postmetadata"><span class="timr">Published
April 24th, 2007 </span>
<span class="catr">in
<a href="http://demo.jauhari.net/?cat=1" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> </span> |
<span class="commr">
<a href="http://demo.jauhari.net/?p=3#comments" title="Comment on Lorem Ipsum comes from sections">1 Comment »</a> </span></p>
<div class="entry">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of “de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”, comes from a line in section 1.10.32.</p>
</div>
</div>
<div class="post" id="post-1">
<h2><a href="http://demo.jauhari.net/?p=1" rel="bookmark" title="Permanent Link to Hello world!">
Hello world! </a></h2>
<p class="postmetadata"><span class="timr">Published
April 24th, 2007 </span>
<span class="catr">in
<a href="http://demo.jauhari.net/?cat=1" title="View all posts in Uncategorized" rel="category tag">Uncategorized</a> </span> |
<span class="commr">
<a href="http://demo.jauhari.net/?p=1#comments" title="Comment on Hello world!">1 Comment »</a> </span></p>
<div class="entry">
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
</div>
</div>
-> ne pas oublier de fermer la boucle sur le articles :
</object>
</object>
<div class="navigation">
<div class="alignleft">
</div>
<div class="alignright">
</div>
</div>
</div>
<div id="sidebar">
-> la classe "about" est sur les deux colonnes de gauche. On va l'utiliser pour mettre les blocs
traditionnellement positionnés au dessus des articles. Ici ils seront au dessus des deux colonnes.
<div class="about">
<h2>About</h2>
<p><img src="http://demo.jauhari.net/wp-content/themes/Pitr/images/you.jpg" alt="You Avatar" class="iright" />.</p>
<p class="stats"> There are
5 Posts and
7 Comments so far. </p>
</div>
-> il faut qu'on déclare des macros qui vont générer le code ci-dessus, en fonction du bloc
choisir par l'utilisateur.
<define_macro name="sb_top_start">
<div class="about <arg name="type">">
</define_macro>
<define_macro name="sb_top_end">
</div>
</define_macro>
<define_macro name="sb_top_list_start">
<ul>
</define_macro>
<define_macro name="sb_top_list_end">
</ul>
</define_macro>
<define_macro name="sb_top_title">
<h2><arg name="title"></h2>
</define_macro>
<define_macro name="sb_top_text">
<li><arg name="text"> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_top_link">
<li class="listeLiens"><a href="<arg name="url">" class="<arg name="highlight">"><arg name="text"></a> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_top_link_link">
<li class="description"><a href="<arg name="url1">" class="<arg name="highlight">"><arg name="text1"></a> : <a href="<arg name="url2">" class="internal"><arg name="text2"></a> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_top_link_text">
<li><a href="<arg name="url1">" class="<arg name="highlight">"><arg name="text1"></a> : <arg name="text2"> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_top_anything">
<arg name="anything">
</define_macro>
-> une fois les macros définies, il n'y a plus qu'à faire figurer le bloc, autant de fois qu'on le souhaite.
<smartblock sb_top.1>
<smartblock sb_top.2>
<smartblock sb_top.3>
<smartblock sb_top.4>
-> pour les blocs des deux colonnes, le code à générer est un peu différent, on va donc définir des nouvelles macros.
-> au nom des macros correspondent les noms des blocs (sb_top.1 est associé aux macros préfixées par sb_top)
<div class="side1">
<ul>
<li class="categories"><h2>Category</h2><ul> <li><a href="http://demo.jauhari.net/?cat=4" title="View all posts filed under Code">Code</a> (1)
</li>
<li><a href="http://demo.jauhari.net/?cat=3" title="View all posts filed under Ipsum">Ipsum</a> (1)
</li>
<li><a href="http://demo.jauhari.net/?cat=5" title="View all posts filed under List">List</a> (1)
</li>
<li><a href="http://demo.jauhari.net/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a> (2)
</li>
</ul></li>
<define_macro name="sb_start">
<li class="linkcat boxr">
</define_macro>
--> ci-dessus, les classes linkcat et boxr sont définies dans le modèle d'origine
pour la colonne de gauche et de droite respectivement.
<define_macro name="sb_end">
</li>
</define_macro>
<define_macro name="sb_list_start">
<ul>
</define_macro>
<define_macro name="sb_list_end">
</ul>
</define_macro>
<define_macro name="sb_title">
<h2><arg name="title"></h2>
</define_macro>
<define_macro name="sb_text">
<li><arg name="text"> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_link">
<li class="listeLiens"><a href="<arg name="url">" class="<arg name="highlight">"><arg name="text"></a> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_link_link">
<li class="description"><a href="<arg name="url1">" class="<arg name="highlight">"><arg name="text1"></a> : <a href="<arg name="url2">" class="internal"><arg name="text2"></a> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_link_text">
<li><a href="<arg name="url1">" class="<arg name="highlight">"><arg name="text1"></a> : <arg name="text2"> <arg name="extra_text"></li>
</define_macro>
<define_macro name="sb_anything">
<arg name="anything">
</define_macro>
<smartblock sb.1>
<smartblock sb.2>
<smartblock sb.3>
<smartblock sb.4>
<smartblock sb.5>
<smartblock sb.6>
<smartblock sb.7>
<smartblock sb.8>
<smartblock sb.9>
<smartblock sb.10>
-> on efface les autres blocs du blog d'exemple :
<li id="linkcat-2" class="linkcat"><h2>Blogroll</h2>
<ul>
<li><a href="http://www.alexking.org/">Alex</a></li>
<li><a href="http://inphotos.org/">Donncha</a></li>
<li><a href="http://dougal.gunters.org/">Dougal</a></li>
<li><a href="http://photomatt.net/">Matt</a></li>
<li><a href="http://zengun.org/weblog/">Michel</a></li>
<li><a href="http://zed1.com/journalized/">Mike</a></li>
<li><a href="http://boren.nu/">Ryan</a></li>
</ul>
</li>
</ul>
</div>
<div class="side2">
<ul>
-> les blocs de la colonne de droite ont la même forme que la colonne de gauche, on peut
réutiliser les mêmes macros, et simplement ajouter des blocs :
<smartblock sb.1b>
<smartblock sb.2b>
<smartblock sb.3b>
<smartblock sb.4b>
<smartblock sb.5b>
<smartblock sb.6b>
<smartblock sb.7b>
<smartblock sb.8b>
<smartblock sb.9b>
<smartblock sb.10b>
<li class="boxr">
<h2>Archives</h2>
<ul>
<li><a href='http://demo.jauhari.net/?m=200704' title='April 2007'>April 2007</a></li>
</ul>
</li>
<li id="emploan">
<h2>Meta</h2>
<ul>
<li>
<a href="http://demo.jauhari.net/wp-login.php">Login</a> </li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
</ul>
</li>
</ul>
</div>
</div><br class="clear" />
</div>
<div id="footer">
<hr />
<p><strong>
Themes Demo </strong> © 2007 All Rights Reserved. Using <a href="http://wordpress.org/">WordPress</a> Engine
</p>
<p><strong>
<SITE_TITLE></strong>. Hébergé sur <a href="http://viabloga.com/">ViaBloga</a>
</p>
<p class="right"> <span><a href="http://www.jauhari.net/themes/pitr" title="Pitr 2.1">Pitr 2.1</a> made by <a href="http://www.jauhari.net/">Nurudin Jauhari</a></span></p>
<br class="clear" />
</div>
</body></html>
Vie de ViaBloga
RSS 1.0, RSS 2.0, Atom, Commentaires, Textes,
Derniers commentaires
→ plus de commentaires