Création d'un théme

abdelkader · août 2017

Bonjour à tous,

J'ai télécharger un template en HTML et je veux l'adapter à PLUXML, je l'ai "décortiqué", j'ai pu faire donc le HEADER, FOOTER ect... seulement je suis obligé de mettreles repertoires CSS, JS, ect... à la racine du site et non au repertoire du théme et pour faire cela il faut que je change le chemin dans le code source, mais je ne sais pas comment ???

Autre chose, je désire afficher les articles avec les images en petits format sur la page d'accueil (comme au thème ACCESS PRESS MAG) pet pour ça il faut que je modifie les fichiers CSS je crois !?

Quelqu'un pourrait m'aider SVP ? je tiens à faire un petit quelque chose pour mon petit portail favoris PLUXML

Merci à vous

Pierre · août 2017

Les premières étapes semblent bien commencées, j'encourage quiconque à tenter l'expérience. Il faut en effet "dépecer" les morceaux les plus évidents comme le header, le footer, la sidebar, etc.

Je ne sais pas pourquoi les CSS et JS ne doivent pas être dans le répertoire du thème dans ce cas-ci, parce que c'est non seulement la bonne façon mais ça ne casse rien ailleurs non plus. C'est la fonction <?php $plxShow->template(); ?> qui fait tellement bien ce travail. Ceci dit, on peut aussi les mettre dans la racine en enlevant simplement ladite fonction dans l'appel des CSS et des JS, habituellement dans header.php

Le thème AccessPressMag est une grosse pointure, c'est préférable d'en prendre un plus simple pour étudier les fonctions mais il va nous servir ici. Pour les images rognées, j'y ai utilisé l'utilitaire externe cImage qu'on retrouve dans le répertoire du thème sous la forme du fichier img.php Il y a deux façons d'y faire appel: à l'intérieur d'une variable $format dans une fonction ou en html brut, souvent à l'intérieur d'une boucle WHILE. Les deux méthodes sont bien illustrées dans le code de la très longue page home.php dans le thème AccessPressMag.

Bonne chance, on aura droit de voir ce thème, j'espère!

abdelkader · août 2017

Bonjour Pierre,

Merci beaucoup pour votre aide mais j'avoue que j'ai du mal à vous suivre, je suis loin d’être un expert de programmation.

J'essaierai tout doucement d'avancer et de proposer un petit quelque chose

Coradialement

Pierre · août 2017

Séparons les deux sujets.

Les fichiers de CSS et de JS sont habituellement installés dans le répertoire du thème. Svp indiquer si c'est un problème et si oui, lequel. L'installation dans le répertoire racine est parfaitement possible si jamais c'est important.

Le rognage automatique des photos est une manoeuvre complexe que l'utilitaire cImage fait avec brio. On utilise cette méthode parce qu'on ne sait jamais si l'image d'accroche d'un article est carrée, orientée verticalement ou horizontalement. Ce qu l'on sait toutefois, c'est la taille exacte de son emplacement. C'est tout ce qu'il faut à cImage pour redimentionner et "trancher" l'excédant pour faire entrer le maximum sans déformer la photo.

Si je peux avoir l'adresse où le fameux thème HTML a été trouvé, je peux sans doute diriger l'aventure (sans enlever le plaisir en faisant tout le travail).

abdelkader · août 2017

Vous avez raison Pierre, commençons par le commencement.

Je refais tout à nouveau pour ne pas bruler les etapes, je vais donc commencer par les repertoires CSS IMG etc...

Pour les photos, c'est une autre paire de manche, nous en reparlerons une autre fois, comme c'est mon premier thème, je suis votre conseil, je fais des trucs simple pour ne pas me compliquer la tache.

Le theme en question est: https://webthemez.com/acura-business-bootstrap-website-template/

Pierre · août 2017

Très bien, alors allons-y à partir de zéro. Ça servira même d'exemple pour les courageux qui s'y lanceront.

Dommage que le thème soit payant, il ne pourra pas faire partie de la section Ressources pour être téléchargeable par nos amis. Pas grave, le tutoriel fera le travail, j'accompagne dans le crime. Bien entendu, je n'ai JAMAIS (tousser ici) pris une capture d'écran dans un démo pour en faire un thème.

Le thème (appelons-le Acura) est un bon choix pour utiliser les fonctions de PluXml. On y retrouve un carrousel en accueil qui utilise flexslider.js

Je présume que la sidebar.php n'existera pas, remplacée par les sections présentes dans le footer.

Pour rester dans la simplicité, nous oublierons la page de portfolio, même si PluXml peut très bien reproduire le tout avec du code que nous garderons pour la dernière séance si tout le monde est encore vivant.

Le début de la page header.php aurait l'air de ça:

[== Indéfini ==]
<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="<?php $plxShow->charset('min'); ?>">
<title><?php $plxShow->pageTitle(); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<?php $plxShow->meta('description') ?>
<?php $plxShow->meta('keywords') ?>
<?php $plxShow->meta('author') ?>
<!-- css -->
<link href="<?php $plxShow->template(); ?>/css/bootstrap.min.css" rel="stylesheet" />
<link href="<?php $plxShow->template(); ?>/css/fancybox/jquery.fancybox.css" rel="stylesheet"> 
<link href="<?php $plxShow->template(); ?>/css/flexslider.css" rel="stylesheet" /> 
<link href="<?php $plxShow->template(); ?>/css/style.css" rel="stylesheet" />
<?php $plxShow->templateCss() ?>
<?php $plxShow->pluginsCss() ?>
<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?>" />
 
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

On y voit les lignes d'appel des CSS qui utilisent la fonction $plxShow->template() mentionnée plus tôt. À noter qu'on devra réutiliser cette même tactique pour la longue liste de fichiers JS dans le footer, les bonnes pratiques voulant qu'ils soient installés là. On en reparlera. Le fichier header.php n'est pas complet après cette portion, mais elle est fondamentale.

abdelkader · août 2017

Waoo c'est rapide !

oui tout ça est logique j'ai fais presque la même chose, je me dis donc que je suis dans la bonne voie !

je continue l'aventure et je reviens vers vous.

Pierre · août 2017

Tant mieux, c'est bon signe. La suite de header.php incorpore la fonction qui construit dynamiquement le menu (incluant la version "hamburger" responsive)

[== Indéfini ==]
<body>
<div id="wrapper" class="home-page">
<div class="topbar">
  <div class="container">
    <div class="row">
      <div class="col-md-12"> 	  
        <p class="pull-left hidden-xs"><i class="fa fa-clock-o"></i><span>Mon - Sat 8.00 - 18.00. Sunday CLOSED</span></p>
        <p class="pull-right"><i class="fa fa-phone"></i>Tel No. (+001) 123-456-789</p>
      </div>
    </div>
  </div>
</div>
	<!-- start header -->
	<header>
        <div class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.php"><img src="img/logo.png" alt="logo"/></a>
                </div>
                <div class="navbar-collapse collapse ">
                    <ul class="nav navbar-nav">
						<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li class="#static_class #static_status" id="#static_id"><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
						<?php $plxShow->pageBlog('<li class="#page_class #page_status" id="#page_id"><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
                   </ul>
                </div>
            </div>
        </div>
	</header>
<!-- end header -->

Je laisse traîner les vestiges codés en dur comme les heures d'ouverture et l'image du logo d'entreprise, je présume que cette partie ne représente pas un trop gros défi.

Pierre · août 2017

On passe ensuite au footer.php il contient des fonctions élaborées que l'on aurait habituellement retrouvées dans la sidebar.php qui n'existera pas ici, comme mentionné plus haut. Le début de footer.php ressemble à

[== Indéfini ==]
	<footer>
	<div class="container">
		<div class="row">
			<div class="col-md-3 col-sm-3">
				<div class="widget">
					<h5 class="widgetheading">Our Contact</h5>
					<address>
					<strong>Bootstrap company Inc</strong><br>
					JC Main Road, Near Silnile tower<br>
					 Pin-21542 NewYork US.</address>
					<p>
						<i class="icon-phone"></i> (123) 456-789 - 1255-12584 <br>
						<i class="icon-envelope-alt"></i> email@domainname.com
					</p>
				</div>
			</div>

Rien de bien exceptionnel, des lignes en dur qui ne demandent qu'à recevoir une information corrigée pour l'entreprise concernée. C'est ensuite que les fonctions arrivent. Disons que la section "Quick Links" ressemble tellement au menu qu'on lui donnera ce rôle, c'est un choix éditorial de ma part pour fin de tutoriel, la section peut très bien contenir n'importe quoi d'autre.

[== Indéfini ==]
			<div class="col-md-3 col-sm-3">
				<div class="widget">
					<h5 class="widgetheading">Quick Links</h5>
					<ul class="link-list">
					<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li><a href="#static_url" title="#static_name">#static_name</a></li>'); ?>
					<?php $plxShow->pageBlog('<li><a href="#page_url" title="#page_name">#page_name</a></li>'); ?>
					</ul>
				</div>
			</div>

Pierre · août 2017

Je donne en exemple une des autres sections, disons qu'on y met les derniers articles

[== Indéfini ==]
			<div class="col-md-3 col-sm-3">
				<div class="widget">
					<h5 class="widgetheading"><?php $plxShow->lang('LATEST_ARTICLES'); ?></h5>
					<ul class="link-list">
	   		<?php $plxShow->lastArtList('<li><a class="#art_status" href="#art_url" title="#art_title">#art_title</a></li>'); ?>
					</ul>
				</div>
			</div>

Tout cela étant optionnel et interchangeable, je ne ferai pas les autres ici, c'est directement tiré de sidebar.php

Pierre · août 2017

Si tout s'est bien passé (peu problable, on verra les problèmes plus tard), on attaque la home.php

Le centre de la page débute par un carrousel (flex-slider) qui déroule une image avec du texte superposé. Toute la force de PluXml est sur le point de surgir...

Le thème par défaut déroule la liste des articles destinés à l'accueil par ue boucle WHILE qui tourne jusqu'à épuisement. Ce qui se trouve entre WHILE et ENDWHILE constitue ce qui touche un article. Le thème appelle les variables de titre, de chapo, l'auteur, les catégories concernées, etc.

Mais cette liste peut contenir ce que l'auteur du thème veut bien. Si on imagine que le carrousel déroule de l'information comme l'image d'accroche, le titre et le chapo, on obtient exactement ce que le thème Acura contient dans un des "articles" de son carrousel.

[== Indéfini ==]
              <li>
                <img src="img/slides/1.jpg" alt="" />
                <div class="flex-caption">
                    <h3>Creative</h3> 
			<p>We create the opportunities</p> 
                </div>
              </li>

Chez nous, la liste dynamique devient:

[== Indéfini ==]

<!-- Slider -->
<section id="banner">
<div id="main-slider" class="flexslider">
<ul class="slides">
<?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
	<li>
               <img src="<?php $plxShow->artThumbnail('#img_url'); ?>" alt="<?php $plxShow->artThumbnail('#img_alt'); ?>" />
                <div class="flex-caption">
                    <h3><?php $plxShow->artTitle('link'); ?></h3> 
			<p><?php $plxShow->artChapo(); ?></p> 
                </div>
        </li>
<?php endwhile; ?>
</ul>
</div>
<!-- end slider -->
</section>

Et c'est là qu'arrive le problème des images de proportions irrégulières. Rien n'y paraît si toutes les images ont des proportions identiques, dans le cas contraire la page descend et remonte selon la photo affichée.

cImage vient sauver la mission, mais ce sera pour une autre leçon. En attendant d'avoir digéré tout ça, les images vont pousser vers le bas le reste de la page et continuer à nous mettre sur les nerfs.

abdelkader · août 2017

Vous avez lu dans mes pensées !

Tout allait bien jusqu'à où je me suis trouvé coincé devant ce Slider, et quand j'ai ajouté ce code ça n'a fait que compliquer les choses !

Je m'arrête là pour aujourd'hui, je verrai certainement plus clair demain

Merci pour votre précieuse aide

abdelkader · août 2017

Bonjour,

Autre chose ui me tracasse: les photos ne s'affiche que lorsque je mets le répertoire IMG à la racine !

abdelkader · août 2017

Voilà ce qui manquait pour l'affichage des images: <img src="<?php $plxShow->template(); ?>/

donc le code pour afficher les images doit etre dans ce genre: <img src="<?php $plxShow->template(); ?>/img/about.png" alt="">

Pierre · août 2017

De toutes façons, les images ne seront plus adressées directement mais feront partie d'une fonction. En principe, une fois un thème terminé, tout changement passe par l'écran d'admin et on n'ouvre plus jamais le code pour modifier tout contenu. Le répertoire img ne contiendra plus que quelques flèches ou icônes génériques. Les photos sont chargées dans /data/medias et ma préférence est de les utiliser sous forme d'image d'accroche. J'étire le concept d'article au maximum et j'arrive à mes fins. La fonction lastArtList() est d'une immense utilité pour offrir dynamiquement du contenu qui peut être géré par l'écran d'admin.

C'est un bon moment pour en parler parce que nous arrivons au reste de la page d'accueil (sous le carrousel) et les choix sont propres aux besoins du mandat. Il faudra comprendre lastArtList() et savoir ce qu'on veut afficher de quelle façon. Mon principe reste: tout est un article, toutes les images sont des accroches. Une exception qui arrive de plus en plus souvent, les icônes tirés de banques génériques (comme glyphicons-halflings dans le cas présent) dont je mets souvent le chiffre dans le chapo.

Bonne nouvelle, le gabarit offert par son créateur est bel et bien offert gratuitement si on garde la référence en bas de page, ce que je fais toujours par respect pour leur bon travail. Ceci veut dire qu'à la fin de notre exercice nous pourrons déposer le thème Acura dans la rubrique Ressources pour le rendre disponible.

abdelkader · août 2017

Je suis tout à fait d'accord avec vous pour les images d'accroche etc...si je cherche le chemin pour les photos c'est juste pour me former et voir comment que ça se passe.

Oui le template est gratuit, si non je ne l'aurai pas proposé. dés qu'on finisse avec ce thème j'essaierai de faire quelque chose (toout seul lol) pour , PLUXML m'a beaucoup aidé et je veux lui rendre la pareille.

Pierre · août 2017

Il faut pas se gêner pour poser des questions ici. Les fonctions de PluXml sont très puissantes mais parfois intimidantes, les petits trucs des amis du forum pourront offrir de l'aide quand ça bloque.

De mon côté, je terminerai les fonctions avec des choix génériques pour bâtir l'accueil et je mettrai le thème disponible au téléchargement. Ça offrira une suite de méthodes pour afficher de différentes façons les pièces du casse-tête.

abdelkader · août 2017

J'ai hate à le voir tourner

Merci pour tout

Création d'un théme

Réponses