Thème OnePage

niqnutnniqnutn Member
août 2016 modifié dans Réalisations
Bonjour,

Un petit thème sans prétention pour un site OnePage avec PluXml.
J'ai créé le thème dans le but d'avoir une administration simplifié pour un site OnePage.

Pour télécharger le thème: https://github.com/nIQnutn/PluXml-OnePage

af87c73c-6d51-11e6-97c4-665cfaaa876a.png

Le fonctionnement est assez simple:
* créer une page statique (http://pluxml.cool/core/admin/statiques.php)
* ajouter le groupe "onePage" pour chacune des pages

Normalement, le menu devrait être géré automatiquement et les pages dans l'ordre définit dans la page d'administration.

Pour ajouter une image de fond pour la bannière et le bas de page:
* créer un dossier "onepage" dans la gestion des médias (http://pluxml.cool/core/admin/medias.php)
* pour la bannière, ajouter une image avec le nom "banner.jpg"
* pour le pied de page, ajouter une image avec le nom "footer.jpg"

Pour ajouter une image de fond en dessous de chaque page statique:
* créer un dossier "onepage" dans la gestion des médias (http://pluxml.cool/core/admin/medias.php)
* ajouter une image avec le nom "x.jpg" (x correspondand à l'id de la page statique)
par exemple: 8.jpg pour la page statique ayant pour Identifiant page 008 .


Le thème OnePage reprend le framework W3css http://www.w3schools.com/w3css/w3css_demo.asp
L'avantage est de pouvoir modifier simplement le visuel du site en éditant seulement les classes.

Les couleurs peuvent être modifiées, soit avec plxW3cssThemeSelect ou directement en éditant la feuille de style CSS (http://pluxml.cool/themes/onepage/css/w3-custom.css)

Le thème contient un nombre limité de pages:
* page d'accueil
* article
* page statique

il est toujours possible de compléter le thème en reprenant des pages du thème PluXml-W3css.

f0d4f148-6d50-11e6-8ac6-1cb5e4ac7f44.png
610ffdfe-6d51-11e6-8a89-0493fcc0ce27.png
6125fe92-6d51-11e6-8983-7b43b592af40.png
«1

Réponses

  • Le thème est en cours de test.
    Il peut exister quelques bugs et pb d'affichage.

    En cas de pb, expliquer le pb rencontré pour que je puisse corriger rapidement.
  • Très joli comme aperçu! :)
  • Et en plus c'est libre.

    C'est surtout un squelette pour une utilisation facile.
    Pour les couleurs, la mise en page, tout est éditable relativement facilement et accessible pour les débutants qui ont pas ou peu de connaissances HTML/CSS.


    La question qui reste en suspend: est ce qu'on va pouvoir uploader le thème dans les ressources http://ressources.pluxml.org/
    mon petit doigt me dit que Pierre va devoir nous convertir les archives, ou un autre gars sympa qui ne rencontre pas de pb entre le .zip et le formulaire.
  • Si le site est véritablement en one-page, pourquoi ne pas tout mettre dans la home.php? En admin, on peut encore créer des articles et des catégories pour populer les sections mais les gabarits ne sont pas nécessaires, pas plus que toute forme de page statique.

    Par contre, si on accepte de tricher et de "sortir" du concept one-page, alors là on peut penser à des pages externes, ce n'est plus un vrai one-page mais on s'en fout un peu, c'est souvent pratique.

    Le système de chargement de la rubrique Ressources fonctionne, il est capricieux et exige un fichier zip qu'il peut correctement "avaler" mais je n'ai pas d'outils spéciaux différents des vôtres, je me sers de 7zip et tout fonctionne à chaque fois.
  • je préfère souvent garder le maximum d'éléments du thème par défaut et de PluXml.
    c'est certainement loin d'être optimal mais ça fonctionne.
    ceux qui veulent améliorer/adapter le thème peuvent le faire.

    j'ai pas tout mis dans le home.php parce qu'on peut toujours faire un lien vers une page statique ou un article avec le même header et footer et je ne me suis pas vraiment posé la question. il est possible de fusionner le header.php + home.php + footer.php et créer un home-onepage.php mais le résultat final sera identique.

    je sais pas si les articles peuvent servir mais pour un site vitrine, tu peux très bien ajouter tes CGU dans une page statique avec le lien sur la page principale ou en bas de page.
    il est toujours préférable de pouvoir ajouter du contenu avec des pages statiques et articles. ça existait, donc pourquoi le supprimer et ça ne prend pas de place.

    chacun adaptera ensuite à ses propres besoins.
  • Quand un gabarit one-page est "religieusement" respecté, il se charge une seule fois et on peut y passer la journée en débranchant l'internet. C'est un peu intégriste comme approche mais c'est pour illustrer le principe. On utilise encore toute la force de PluXml mais sur un seul gabarit.

    Les éléments de gabarits du thème par défaut sont prévus pour lui, il faut pas se gêner d'exploiter à fond le principe du one-page et de de remplir les cases avec le contenu désiré. On tape des articles et on les groupe par catégories exactement comme d'habitude en n'oubliant pas le principe qu'il n'existera pas de page d'article et que tout se retrouvera sur la fameuse unique grosse page. De cette façon, on n'a pas à modifier du code quand un changement arrive dans le contenu, on fait tout par l'admin, c'est moins intimidant.

    Ceci dit, le principe du one-page est évidemment très restrictif sur la quantité d'articles, il plaît pas à tout le monde. J'en ai fait quelques-uns pour illustrer la flexibilité de PluXml comme Kreo et Foodee, ils fonctionnent tous avec des articles et des catégories. Mais les besoins des blogueurs prolifiques vont rapidement en montrer les limites.
  • Bonsoir,

    Les captures montre un très jolie thème, je souhaiterai l'utiliser pour un projet mais je n'arrive pas à mettre une formulaire de contact.
    Sur les captures ont voit bien une rubrique avec texte et formulaire, je me dis donc que c'est possible ;)

    Est-il possible d'intégrer le plugin officiel MyContact ou un autre comme sur un thème "traditionnel" ?
  • Oui c'est possible d'intégrer le plugin plxMyContact mais ça demande une certaine manipulation du fichier du formulaire pour que l'aspect visuel de la feuille de style s'arrime. C'est dommage que cette complexité augmente de beaucoup la difficulté, j'en ai parlé souvent à Stéphane. C'est la même chose pour le formulaire de recherche qui doit subir le même sort.

    L'installation expliquée plus haut semble un peu plus complexe que la rubrique Ressources, ça aiderait pour le téléchargement directement dans le répertoire. Je suggère plutôt de choisir un gabarit de type "page unique" dans les catalogues partout sur le net, je n'oserais jamais cambrioler le gabarit de notre ami ici sans sa permission.

    L'intégration à PluXml est très rapide, ça me fera plaisir de faire la conversion et mettre le gabarit en téléchargement. On magasine sur des sites comme:

    https://html5up.net/
    http://www.css3templates.co.uk/
    https://templated.co/
    http://www.free-css.com/
    http://www.justfreetemplates.com/web-templates

    et plein d'autres...
  • ça pose quelques soucis pour plusieurs raisons.
    j'ai déjà ajouter un formulaire de contact mais en gros, je prends le plugin de Stéphane, je récupère les fonctions et je l'intègre dans une page statique.
    il est possible de créer dans le template une page pour le formulaire mais faudrait maintenir ça correctement.
    ce thème est surtout là pour ceux qui veulent bidouiller.
  • je-evrardje-evrard Member
    octobre 2017 modifié
    Bonjour,

    Pour ce que ça intéresse il est possible de faire un formulaire de contact capcha uniquement en shortcode.

    Installation de spxshortcode nécessaire.

    Dans son thème on créé un config.php à la racine avec ce code
    [== Indéfini ==]
    <?php
    /* ----------------------------CONTACT FORM---------------------------------*/
    function ufs_contact_form_func( $atts ) {
    	global $plxShow;
    	$plxShow = plxShow::getInstance();
    	$plxShow->plxMotor->plxCapcha = new plxCapcha();
    	
        // This line of comment, too, holds the place of the brilliant yet simple shortcode that creates our contact form. And yet you're still wasting your time to read this comment. Bravo.
    	extract( shortcode_atts( array(
        // if you don't provide an e-mail address, the shortcode will pick the e-mail address of the admin:
        "email" => "",
    	"email_cc" => "",
    	"email_bcc" => "",
    	
        "subject" => "",
        "label_name" => "Your Name",
        "label_email" => "Your E-mail Address",
        "label_subject" => "Subject",
        "label_message" => "Your Message",
        "label_submit" => "Submit",
        // the error message when at least one of the required fields are empty:
        "error_empty" => "Please fill in all the required fields.",
        // the error message when the e-mail address is not valid:
        "error_noemail" => "Please enter a valid e-mail address.",
    	"error_sendemail" => "There is an error, sorry",
    	
    	"error_antispam" => "There is an error antispam, sorry",
    	"captcha" => "true",
    	"label_antispam" => "Antispam",
        // and the success message when the e-mail is sent:
        "success" => "Thanks for your e-mail! We'll get back to you as soon as we can.",
    	
    	), $atts ) );
    	
    	// if the <form> element is POSTed, run the following code
    	if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
    		$error = false;
    		// set the "required fields" to check
    		$required_fields = array( "your_name", "email", "message", "subject" );
    	 
    		// this part fetches everything that has been POSTed, sanitizes them and lets us use them as $form_data['subject']
    		foreach ( $_POST as $field => $value ) {
    			if ( get_magic_quotes_gpc() ) {
    				$value = stripslashes( $value );
    			}
    			$form_data[$field] = strip_tags( $value );
    		}
    	 
    		// if the required fields are empty, switch $error to TRUE and set the result text to the shortcode attribute named 'error_empty'
    		foreach ( $required_fields as $required_field ) {
    			$value = trim( $form_data[$required_field] );
    			if ( empty( $value ) ) {
    				$error = true;
    				$result = $error_empty;
    			}
    		}
    	 
    		// and if the e-mail is not valid, switch $error to TRUE and set the result text to the shortcode attribute named 'error_noemail'
    		if (! filter_var($form_data['email'], FILTER_VALIDATE_EMAIL)) {
    			$error = true;
    			$result = $error_noemail;
    		}
    		
    		if($captcha == "true" AND $_SESSION['capcha'] != sha1($_POST['rep'])){
    			$error = true;
    			$result = $error_antispam;
    		}
    	 
    		// but if $error is still FALSE, put together the POSTed variables and send the e-mail!
    		if ( $error == false ) {
    			
    			$email_subject = $form_data['subject'];
    			// get the message from the form and add the IP address of the user below it
    			$email_message = $form_data['message'] . "\n\nIP: " . ufs_get_the_ip();
    			
    			if(plxUtils::sendMail($form_data['your_name'],$form_data['email'],$email,$email_subject,$email_message,'text',$email_cc,$email_bcc)) {
    				// and set the result text to the shortcode attribute named 'success'
    				$result = $success;
    				// ...and switch the $sent variable to TRUE
    				$sent = true;
    			}else{
    				$result = $error_sendemail;
    			}
    			
    		}
    	}
    	
    	if ( $result != "" ) {
    		if ($error == true)
    			$info = '<div class="alert red">' . $result . '</div>';
    		else
    			$info = '<div class="alert blue">' . $result . '</div>';
    	}
    	
    	
    	
    	ob_start();
    	$plxShow->capchaQ();
    	$capcha = ob_get_clean();
    	
    	
    	// anyways, let's build the form! (remember that we're using shortcode attributes as variables with their names)
    	$email_form = '<form class="contact-form" method="post" action="#form">
    		<div>
    			<label for="cf_name">' . $label_name . ':</label>
    			<input type="text" name="your_name" id="cf_name" size="50" maxlength="50" value="' . $form_data['your_name'] . '" />
    		</div>
    		<div>
    			<label for="cf_email">' . $label_email . ':</label>
    			<input type="text" name="email" id="cf_email" size="50" maxlength="50" value="' . $form_data['email'] . '" />
    		</div>
    		<div>
    			<label for="cf_subject">' . $label_subject . ':</label>
    			<input type="text" name="subject" id="cf_subject" size="50" maxlength="50" value="' . $subject . $form_data['subject'] . '" />
    		</div>
    		<div>
    			<label for="cf_message">' . $label_message . ':</label>
    			<textarea name="message" id="cf_message" cols="50" rows="15">' . $form_data['message'] . '</textarea>
    		</div>
    		';
    	if($captcha == "true") {
    	$email_form .='
    		<div>
    			<label for="id_rep"><strong>' . $label_antispam. '</strong></label>
    			'.$capcha.'
    			<input id="id_rep" name="rep" type="text" size="2" maxlength="1" style="width: auto; display: inline;" autocomplete="off" />
    		</div>
    		';
    	}
    	$email_form .='
    		<div>
    			<input type="submit" value="' . $label_submit . '" name="send" id="cf_send" />
    		</div>
    		
    	</form>';
    	
    	if ( $sent == true ) {
    		return $info;
    	} else {
    		return $info . $email_form;
    	}
    
     }
    add_shortcode( 'ufs_contact', 'ufs_contact_form_func' );
    ?>
    

    Puis de n'importe ou (article, statique, thème...) pour afficher le formulaire :
    [== Indéfini ==]
    [ufs_contact 
    	email="xxx@toto.fr" 
    	subject="Projet spx 5" 
    	label_name="Votre nom" 
    	label_email="Votre addresse email" 
    	label_subject="Sujet" 
    	label_message="Votre message" 
    	label_submit="Envoyer" 
    	label_antispam="Vérification anti-spam." 
    	error_empty="Veuillez remplir tous les champs." 
    	error_noemail="Veuillez entrer une adresse email valide." 
    	error_sendemail="Il y a eu une erreur d'envoie" 
    	error_antispam="Vous n'avez pas rentrer la bonne lettre pour l'antispam" 
    	success="Merci pour votre message ! Nous reviendrons vers vous dès que possible."
    	]
    

    Pourquoi ce compliquer la vie ?

    PS : sortie html compatible plucss
  • Le problème d'intégration ne vient pas du bon fonctionnement du plugin de Stéphane, il fonctionne sans accrocs.

    Le problème est la nécessité d'aller modifier le code HTML à l'intérieur de la fonction, une lacune omniprésente partout dans PluXml. Ça ne bouleverse pas la vie de ceux qui utilisent des thèmes qui ressemblent à la version par défaut mais la moindre créativité au niveau du design est récompensée par au moins une douzaine d'interventions manuelles.

    J'ai fini par m'en faire une raison et je fais ces changements à chacune des conversions, les priorités d'amélioration ne semblent pas à cet endroit. Un jour peut-être...
  • je-evrardje-evrard Member
    octobre 2017 modifié
    Pierre a écrit:
    Le problème est la nécessité d'aller modifier le code HTML à l'intérieur de la fonction, une lacune omniprésente partout dans PluXml. Ça ne bouleverse pas la vie de ceux qui utilisent des thèmes qui ressemblent à la version par défaut mais la moindre créativité au niveau du design est récompensée par au moins une douzaine d'interventions manuelles.

    La je te propose justement une solution qui permet de conserver l'html non seulement dans le thème et sans plugin spécifique simplement avec un plugin générique (shortcode) et dont le poids est de 40ko. C'est ultra puissant et ultra léger.

    A noter : ce sont en partie les shortcodes qui ont fait le succès de wordpress. Et on a beau critiquer wp, cette fonction que j'utilise dans le plugin est tout simplement magnifique. J'utilse ce plugin dans tous mes projets clients depuis 2013 sans aucun ralentissement. Dommage d'ailleurs que ce ne soit pas en natif pluxml. Cette fonctionnalité pourrait faire monter pluxml en puissance...
  • je-evrard a écrit:

    La je te propose justement une solution qui permet de conserver l'html non seulement dans le thème et sans plugin spécifique simplement avec un plugin générique (shortcode) et dont le poids est de 40ko. C'est ultra puissant et ultra léger.

    A noter : ce sont en partie les shortcodes qui ont fait le succès de wordpress. Et on a beau critiquer wp, cette fonction que j'utilise dans le plugin est tout simplement magnifique. J'utilse ce plugin dans tous mes projets clients depuis 2013 sans aucun ralentissement. Dommage d'ailleurs que ce ne soit pas en natif pluxml. Cette fonctionnalité pourrait faire monter pluxml en puissance...

    On Adore clap clap clap clap
  • Le problème du code HTML inséré dans les fonctions est toujours là, ce code est partie intégrante des fonctions, aussitôt qu'on les utilise, peu importe les plugins ou shortcodes. À moins de remplacer la fonction, ce qui dénature PluXml, les DIV et autres balises vont arriver dans le code du rendu à l'écran.

    De toutes façons, Stéphane est au courant, inutile pour moi d'en faire un plat, je sais contourner la contrainte en insérant une montagne de lignes dans le thème.
  • On doit pas se comprendre je pense...
  • PierrePierre Member
    octobre 2017 modifié
    Je comprend très bien les vertus des shortcodes, je les utilise souvent. La méthode préconisée par PluXml fonctionne aussi très bien, ses fonctions ont (souvent mais pas toujours, malheureusement) un paramètre $format et au besoin d'autres variables qui serviront à produire son contenu.

    Je prèfère voir des améliorations arriver dans PluXml en utilisant cette méthode fort simple plutôt que de demander aux utilisateurs d'accrocher un plugin. C'est un choix idéologique, la simplicité et la cohérence vs les connaissances techniques. La courbe d'apprentissage sera aussi plus acceptable. Avec un peu de chance, Stéphane trouvera le temps dans son horaire chargé pour entendre entre les branches mes suggestions et en grignoter une ou deux.

    Bonne chance avec spxshortcode et ses autres cousins spx, c'est un produit intéressant et très puissant. Tant mieux si ça fait avancer les connaissances de nos amis du forum.
  • je-evrardje-evrard Member
    octobre 2017 modifié
    On arrive à la limite de pluxml, et vouloir mettre des rustines a des fonctions pour répondre a des besoins utilisateurs pas toujours justifiés n'est pas vraiment la meilleure solution (qui peuvent en plus engendrer des régressions).

    La vrai révolution de pluxml n'est pas la malheureusement.

    Les shortcodes peuvent être une vrai révolution pour pluxml car ils ouvrent la voie a une implémentation de fonctions qui peuvent remplacer n'importe quel plugin (sans pollution du coeur de pluxml, sans pull request non justifié).

    L'usage coté utilisateur est tellement simple (sans code et n'importe ou pages, articles....)

    Pour ceux qui ne connaissent pas ce plugin, j'invite à le regarder : SPXUSEFULSHORTCODES

    Un petit exemple ici : shortcode pluxml

    Ce plugin tout simple propose des shortcodes prêts a l'emploi qui seront utilisables dans les fichiers du thème, des articles, des pages statiques.

    il propose toute une série de shortcodes organisés en 4 catégories :

    contact : un shortcode permettant d'afficher un formulaire de contact avec capcha
    boutons : une serie de boutons et notamment des boutons sociaux
    pluxml : des fonctions liées a pluxml comme breadcrumbs, archives, recommandations, statistiques, derniers articles...
    divers : qrcode, youtube, pdf...

    Voila ce qu'on peux faire et bien d'autres choses !
  • quand j'ai un peu de temps, je regarderai ça de près. ça m'a l'air intéressant.
  • Je laisserai Stéphane décider des limites de son produit, je n'ai pas encore rencontré un problème qui n'a pas trouvé sa solution.

    Je peux diriger les intéressés au débat vers la fonction lastArtList() pour une démonstration de mon propos, le paramétrage n'a pas alourdi ni compliqué quoique ce soit, au contraire.
  • Salut,
    petit deterrage de topic,

    quelqu'un a-t-il l'archive a me passer ?
  • DjayDjay Member

    Bonjour à tous,

    Le thème One page est il disponible en téléchargement ? Je ne trouve pas de lien valide.

    Merci

  • cpalocpalo Member
    mai 2020 modifié

    Bonsoir
    Je viens de déposer l'archive sur https://mypluxml.cahue.net/resources

  • DjayDjay Member

    Super merci beaucoup

  • DjayDjay Member
    mai 2020 modifié

    Le lien ne marche pas.

    Edit sans le s de https impeccable thème récupéré

  • cpalocpalo Member

    Toutes mes excuses.. J'ai fait ce matin des tests par rapport à la nouvelle version...et des transferts entre local et online.. et j'ai du faire des erreurs dans le htacces et ou autres. Je corrigerai.
    Bonne continuation

  • Bonjour,

    Est-il toujours possible de le télécharger? Le lien ci-dessus ne semble pas fonctionner.

  • cpalocpalo Member

    Bonsoir
    Je ne suis pas l'auteur de ce thème mais je l'ai normalement quelque part en archives.
    Je vais essayer de le retrouver rapidement. Je fais signe dès que c'est fait

  • Je remonte un vieux sujet mais est-il possible de repartager ce thème pour le bidouiller ?

  • Pas de problème je vais le repartager.
    Là dans le cadre de mise à jour de mon site, j'ai effacer une grande partie des dossiers

Connectez-vous ou Inscrivez-vous pour répondre.