Tous les articles par admin

[Divers] Le Seo et le Penguin – Fable de La Fontaine

La Fontaine version Seo ça donne :

Le SEO, ayant spammé tout l’été,
Se trouva fort dépourvu
Quand le penguin fut venu :
Plus un seul petit pic
De trafic ou de fric.
Il alla crier famine

Chez Google et sa doctrine,
Le priant de lui lever
la pénalité pour subsister
Jusqu’à la mise à jour futur.
« ça va être très dur,
mais ne sort pas de suite la corde,
il te reste Adwords. »
Mais Google n’est pas prêteur :
il ne tolère plus les référenceurs.
Que faisiez-vous pour arriver en haut ?
Dit-il à ce pseudo SEO.
– Nuit et jour à tout venant
Je netlinkais , ne vous déplaise.
– Vous spammiez ? j’en suis fort aise.
Eh bien! désavouez maintenant.

 

Source

[WordPress] Variables Twig

Suite à mon article sur TWIG, voici quelques variables utiles pour TWIG.

Afficher l’index d’un tableau : {{ user['id'] }}

Afficher l’attribut d’un objet, dont le getter respecte la convention $objet->getAttribut() : {{ user.id }}

Afficher une variable en lui appliquant un filtre. Ici, « upper » met tout en majuscules : {{ pseudo|upper }}

Afficher une variable en combinant les filtres. « striptags » supprime les balises HTML : {{ news.texte|striptags }}

Utiliser un filtre avec des arguments. (Attention, il faut que date soit un objet de type Datetime ici) : {{ date|date('d/m/Y') }}

Concaténer : {{ nom ~ " " ~ prenom }}

Insère des variables dans un texte, équivalent à printf : {{ "Il y a %s pommes et %s poires"|format(153, nb_poires) }}

Source

[Photoshop] Astuce

J’utilise photoshop au quotidien pour découper les éléments dans maquettes graphiques. Un de mes collègue m’a donné une astuce qui facilite bien des choses, plus besoin de dupliquer la maquette pour découper les éléments, il suffit de modifier le nom du calque en FICHIER.png (ou .jpg). ensuite, rendez-vous dans le menu Fichier et cliquez sur « Générer les fichiers d’images ».

Les images se généreront dans un dossier portant le nom de votre maquette.

Et voilà, le tour est joué 😉

Enjoy

[WordPress] Récupérer des posts meta

Toujours des astuces avec la syntaxe TWIG.

Si vous avez créer des post meta via ACF, vous pouvez les récupérer de cette façon :

Dans le PHP :

/* Post Meta Slider */
$context["slider"] = array();
	// une slide
	$context["slider"][] = array(
		"img_slider" => get_post_meta($context['post']->ID, 'img_slider1', true),
		"titre_slider" => get_post_meta($context['post']->ID, 'titre_slider1', true),
		"lien_slider" => get_field('lien_slider1', $context['post']->ID)
	);
	$context["slider"][] = array(
		"img_slider" => get_post_meta($context['post']->ID, 'img_slider2', true),
		"titre_slider" => get_post_meta($context['post']->ID, 'titre_slider2', true),
		"lien_slider" => get_field('lien_slider2', $context['post']->ID)
	);
	$context["slider"][] = array(
		"img_slider" => get_post_meta($context['post']->ID, 'img_slider3', true),
		"titre_slider" => get_post_meta($context['post']->ID, 'titre_slider3', true),
		"lien_slider" => get_field('lien_slider3', $context['post']->ID)
	);

Dans le HTML / TWIG

[WordPress] Utiliser Twig et Timber à la place de PHP

J’ai changé récemment d’agence et sur WordPress on n’utilise plus la syntaxe PHP mais l’association de Twig et de Timber.

Avec cette nouvelle syntaxe, le PHP et le HTML sont désormais séparé (un modèle MVC sauf que l’on s’accède pas au Controleur).

Du coup, voici quelques astuces utilisable pour cette nouvelle syntaxe :

Pour faire un var_dump

– Dans le .php

var_dump($context);

– Dans le .html

{{dump(NOM_VAR)}}

Pour faire un permalink dans une boucle

{{post.get_permalink(ID_PAGE)}}

post == nom de la variable Timber

Pour tronquer le contenu (Source)

– Sans afficher les points de suspensions :

{{post.content | truncate(20, false, '')}}

– En affichant les points de suspensions :

{{post.content | truncate(20, true, '...')}}

– Syntaxe raccourcie (mais ne permet pas de rajouter des points de suspension) :

{{post.content[:25]}}

– Vérifier si le contenu est plus longs, si oui on le coupe, si non, on le laisse tel quel

{{post.content|length > 25 ? (post.content[:25] ~ '…') : post.content}}

Récupérer un post meta

– Dans le .php

$context['NOM'] = get_post_meta($context['post']->ID, 'NOM_CUSTOM_FIELD', true);

– Dans le .html

{% if ss_titre %}{{ss_titre}}{% endif %}

Récupération des champs créé avec ACF Source

Champ Wysiwyg ou text

{{post.get_field('my_wysiwyg_or_text_field')}}

Champ image
– Manière rapide (pour la plupart des situations)

– Manière plus complète (pour des situations spéciales)
Dans la page PHP

$post = new TimberPost();
if(isset($post->hero_image) && strlen($post->hero_image)) $post->hero_image = new TimberImage($post->hero_image);
$data = Timber::get_context();
$data['post'] = $post;
Timber::render('single.twig', $data);

Dans la page HTML

Afficher un post thumbnail

– Par défaut

– Avec une taille spécifique

– Recadré automatiquement

– Rétina

Récupération d’un Custom Post Type

– Dans le .php

$args = array(
	'posts_per_page' => -1,
	'post_type'		 => 'NOM_DU_CUSTOM_POST',
);
$context['NOM_VARIABLE'] = Timber::get_posts($args);

– Dans le .html

{% for NOM_VAR in NOM_VARIABLE %}
	{{NOM_VAR.post_title}}
{% endfor %}

Sources

[Divers] Changement du thème

Bonjour a tous,

Vous aurez surement remarqué le changement de design du site.

En effet, je suis passé sur une installation multisite avec mon site CV.

Par contre, il y a eu un soucis à l’import des données et les photos ne sont pas passées. Par conséquent, le temps que je fasse le tour partout, il peut y avoir des images manquantes.

Veuillez m’excuser pour la gêne occasionnée.

Bonne journée
Mélusine

[Infographie] Préparation des achat sur internet

Bonial à étudié le trafic sur son portail web et sur ses applications mobiles à chaque heure de chaque jour de la semaine. Ils ont ainsi identifiés les moments de consultation des catalogues et donc de préparation des achats.

Ainsi la préparation des achats se fait plutôt en début de semaine, mais elle a lieu pendant la journée sur ordinateur et entre 21h et 23h sur mobile.

[Prestashop 1.6] Activer le mode debug pour vos test

Le mode debug vous permet de voir des erreurs dans votre code, que ce soit des failles dans votre code PHP ou dans certains des fichiers TPL. Cela peut-être très utile si vous tombez sur une page blanche !

  1. Connectez-vous à votre FTP via votre client habituel
  2. Allez dans le dossier de config et ouvrez le fichier defines.inc.php
  3. Changer la valeur _PS_MODE_DEV_ de « false » à « true » . Enregistrez votre fichier
  4. Une fois que vous avez terminez votre debug, pensez à bien remettre _PS_MODE_DEV_ de « true » à « false » avant de passer en production

Source

[JS] Ajouter un loader pendant le chargement de vos pages web

Il arrive parfois que certaines pages d’un site internet prennent un moment pour se charger complètement. Cela s’explique par une grande quantité d’images « lourdes » ou une masse de code à interpréter. Autant de notions qui n’existent pas dans la tête d’un utilisateur lambda qui viendrait visiter votre site.

Le meilleur moyen de l’informer et de ne pas risquer de perdre des visites reste d’utiliser un « loader » (animation au chargement) afin que le visiteur comprenne que le site est bien en train de se charger, et qu’il va s’afficher sous peu.

Voici comment ajouter une image de chargement avec jQuery.

1 – Insérer l’image dans la page de code html

  1. Soit insérant une div et en chargeant l’image en tant que « background » en utilisant le CSS.
  2. Soit en insérant l’image directement, via la balise img

N.B. Je privilégie la méthode n°1.

2 – Ajout du CSS pour afficher le loader dans une div

.loader{
	background: url('images/ajax-loader.gif') 50% 50% no-repeat rgba(255, 255, 255, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loader h1{
		background: none;
		border: none;
		color: #458976;
		font-size: 22px;
		font-family: "Open Sans",sans-serif;
		font-variant: small-caps;
		font-weight: 700;
		height: 700px;
		line-height: 700px;
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}

Ce code CSS va forcer l’image de chargement à se placer au centre de l’écran. Libre à vous de personnaliser votre écran de chargement. Il est par exemple possible de changer la couleur de fond via la propriété « background-color ».

3 – Ajouter un effet fadeout grâce à jQuery.

Saisir le code après la balise d’ouverture du body :

Veuillez patientez pendant le chargement de la page.

jQuery(window).load(function(){ jQuery(".loader").fadeOut("200"); });

Et pour créer votre loader, vous pouvez le choisir sur ce site.

Source