background preloader

Anatomie d’un thème

Anatomie d’un thème
1 thème, c'est 1 feuille de style, 1 screenshot, et des templates. Style.css : la feuille de style Ce fichier doit s’appeler style.css et il est indispensable. Screenshot.png : 880×660 Le screenshot s’affiche dans l’administration. Les templates C’est quoi un template ? Un template, c’est un fichier PHP est appelé par WordPress pour générer du HTML. <! Le code est principalement du HTML dans lequel on a ajouté 3 zones de PHP pour insérer du contenu variable. stylesheet_url : l’url de la feuille de style, soit blog.fr/wp-content/theme/mon-theme/style.cssname : le nom du site (paramétrable dans l’administration)description : le slogan Cet exemple de index.php est très pauvre en code, certes, mais il est suffisant. Par souci d’espace horizontal, j’utiliserai des double-espace en lieu et place des tabulations habituelles pour indenter le code. Plan d’un blog Pour comprendre le système de templates, il faut avoir en tête le plan d’un site, et particulièrement celui d’un blog en premier abord. Related:  CSS

Créez votre thème Wordpress de A à Z Update du 5 Octobre 2011: les tutoriels ont beau datés de 2007, ils sont en cours de modifications pour y ajouter les fonctionnalités des dernières versions de WordPress. Quoi qu’il en soit, ils sont toujours d’actualité et ont été mis à jour plusieurs fois. Peut-être que vous aimeriez créer votre propre thème pour votre blog et que vous ne savez pas trop comment vous y prendre ? Et bien, dans les semaines qui vont venir, je vais vous expliquer les différentes étapes à suivre, pas à pas, pour que n’importe qui (ou presque) puisse créer son propre thème. On va voir l’installation de WordPress sur votre ordinateur, les différents types de fichiers, leurs hiérarchies, et les interactions entre eux. On va ensuite apprendre à créer un thème relativement simple avec Photoshop et comment l’intégrer dans les différents fichiers. Quoi qu’il en soit, quelques petits prérequis seront nécessaires. « Stay tuned! Articles déjà en ligne: Leçon #1: Installer WordPress en local sur votre ordinateur Fran6

Custom Fields Custom Fields Languages: English • Español • Nederlands • 日本語 • Македонски • Português do Brasil • Русский • 中文(简体) • (Add your language) WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data. Mood: Happy Currently Reading: Cinderella Listening To: Rock Around the Clock Weather: Hot and humid With some extra coding, it is possible to achieve more complex actions, such as using the metadata to store an expiration date for a post. Meta-data is handled with key/value pairs. Keys can be used more than once per post. Here is an example of what this information might look like on your post: Currently Reading: Calvin and Hobbes Today's Mood: Jolly and Happy Function Reference Usage Based upon our example above, let's put this into action. On your next post, you can add a new book and mood to your meta-data. Displaying Custom Fields It might look like this in the source code: Advanced Techniques for Custom Fields <?

Tutoriel Flipping book wordpress Gratuit Tutoriel pour ajouter un flipping book sur votre blog wordpress. Description Un flipping book est une animation flash permettant de feuilleter un livre en ligne, comme dans le monde “réel”. Cela donne du style à vos articles….. Suivez le guide ! Tutoriel wordpress : Ajouter un flipping Book Ce tutoriel vous explique comment ajouter, configurer et utiliser un flipping book ( animation permettant de lire un livre et de tourner les pages comme dans le monde “réel”). Télécharger le plugin WordPress Flipping Book Fonctionnement du plugin wordpress : Il faut utiliser des images c’est à dire que si vous posséder un document PDF ou Word etc.. à la base, vous devez d’abord l’enregistrer au format .jpg (format photo) avant de pouvoir utiliser le flipping book wordpress. Pour ce faire, il existe de nombreux logiciels comme par exemple PDF Creator. Ensuite 6 étapes : Ajouter un Flipping Book SKU UPC Model Ajouter un Flipping Book Oct 26, 2013byMisterLolo C'est sympa ça je ne connaissais pas du tout..

Tutoriels HTML5, CSS3, Accessibilité, JavaScript, AJAX, jQuery Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5, XHTML), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Attention, il ne faut jamais mettre un <p> dans un <q>, c'est invalide.

n'est pas accessible With the release of version 3.0, WordPress introduced custom post types and updated custom taxonomies which were introduced in v2.8. Since then, WordPress users and developers are able to create their own post types and taxonomies. People are no longer chained to the dull "posts" and "pages" with the boring "categories" and "tags". Yes, using custom post types, custom taxonomies and custom meta boxes are cool. The Hassle of Creating Custom Post Types and Taxonomies I find it hard and boring to create custom post types and taxonomies with the register_post_type() and register_taxonomy() functions. Even as a developer, it's painful to do this with every single post type and taxonomy I have to create - I can't imagine how hard it is for novice WordPress users. Don't get me wrong, you still can or have to do them with SuperCPT, too - but SuperCPT embraces the DRY (Don't Repeat Yourself) principle and eases up the process. Using SuperCPT, the All-in-One Solution The Screencast Conclusion

Codes couleur HTML Tableau de couleurs HTML Cliquez sur n’importe quelle couleur pour obtenir son code HTML. Sélection de couleurs HTML Faites glisser horizontalement le curseur pour choisir la couleur, puis cliquez sur le carré des couleurs sur la gauche pour obtenir le code HTML désiré. Théorie des codes couleur HTML Vous vous demandez donc « Cette étrange combinaison de lettres et de chiffres a-t-elle un sens ? Formats de codes HTML : Chaque code HTML contient le symbole "#" et 6 lettres ou chiffres. Signification des symboles : Les deux premiers du code couleur HTML représentent l’intensité de la couleur rouge. 00 est le minimum, est FF le plus intense. Exemples :#FF0000 - Avec ce code HTML, nous demandons au navigateur d’afficher un maximum de rouge, et ni bleu ni vert. #00FF00 – Ce code HTML affiche du vert, sans bleu ni rouge. #0000FF - Ce code HTML affiche du bleu, sans rouge ni vert. #FFFF00 – Combinaison de rouge et vert donne du jaune : Soutenez ce site web

Web Developers resource for HTML, CSS, Javascript, PHP, SQL and Linux | The Art of Web n'est pas accessible WordPress is built for customization. It was created in such a way that each and every section is customizable. In this tutorial we will be exploring one of the most powerful features of WordPress known as Custom Post Types and how WordPress reached a new height with the advent of this wonderful feature. What Actually Are Custom Post Types? Suppose you want your blog to have a separate section for Movie Reviews. By using Custom Post Types you can create a new type of item like Posts and Pages, which will contain a different set of data. Custom Post Types are a new set of administrative options appearing along with the default post types such as Posts, Pages, Attachments etc. Why Use Custom Post Types? Custom Post Types help us to keep different types of posts in different buckets. Let's Create a Custom Post Type Plugin Here we shall create a custom post type plugin which will display favorite movie reviews. Step 1: Create WordPress Plugin Directory Step 2: Create PHP File Step 3: Add Header

Jardin Zen CSS : La beauté de la conception CSS Alors, de quoi s'agit-il ? Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Pour commencer, regardez quelques designs présents dans la liste. Les CSS permettent un contrôle total de la mise en forme d’un document hypertexte. Participation Notre objectif a toujours été de promouvoir les designs de qualité. Vous pouvez modifier la feuille de style comme bon vous semble, mais pas le code HTML. Téléchargez les fichiers d’exemple HTML et CSS pour travailler sur une copie locale. Avantages Pourquoi participer ? Conditions Si possible, nous aimerions surtout voir l’utilisation de CSS 1 et 2. Heureusement, concevoir de cette manière démontre comment les différents navigateurs ont maintenant bien implémenté les CSS. Nous vous demandons de soumettre des créations originales, merci de respecter les droits d’auteur. Ceci est aussi bien un exercice d’apprentissage que de démonstration. Par Dave Shea.

Basic Ready-to-Use CSS Styles This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles and how to apply them to a variety of elements. View demo Download source Today we are going to dig a little bit more into process development. You can also build classes of classes to custom things to suit your needs. This way the .custom class by itself has no point but if you apply it to a .my-class element, you can tweak a little bit the .my-class styles. Now you got the basic idea, let’s have a look at those patterns, starting with the block-level elements. Note that there are no vendor specific prefixes in this tutorial, but you can find the prefixed styles in the CSS. Block-level elements You are creating an image gallery and want to give some subtle styles to the pictures? The Markup For this whole section, I took an a division with the class “block-level” and added the additional classes to it. The Basic CSS Shadows Links

Related: