WordPress : Activation du site Web des pauses thématiques pour enfants, page vierge, erreur 500

Publié par Jean-Michel le 7 octobre 2022

MISE À JOUR : Résolu ! (02/06/17)

Merci à tous ceux qui ont contribué à donner un aperçu de ce problème !

Qu’est-ce qui a causé le problème ?

La racine du problème s’est avérée être que j’ai copié tout le contenu du dossier du thème parent dans le thème enfant. Bien que ce soit une bonne pratique dans le développement Web général lors de la création d’un nouveau site Web à partir d’un site plus ancien (commencez par dupliquer l’ancien site puis modifiez le contenu des dossiers si nécessaire), les thèmes enfants WordPress fonctionnent un peu différemment.

Qu’est-ce qui l’a réparé ?

Les thèmes enfants doivent commencer par le strict minimum : un dossier de thème enfant nommé de manière appropriée contenant un fichier style.css et un fichier functions.php. Le functions.php dans l’enfant doit faire référence au functions.php dans le parent selon les instructions de Nathan.

ORIGINAL:

LE PROBLÈME

Ma question est spécifique à WordPress . J’ai installé WP pour un client sur http://hepkatorganics.com. Je suis nouveau dans les thèmes enfants, mais les instructions sur le Codex et ce tutoriel (Comprendre les thèmes enfants WordPress en 2016) semblaient assez faciles à suivre. Mais d’une manière ou d’une autre, la modification de la section des commentaires du fichier style.css semble avoir cassé mon site Web. Cela n’a pas de sens d’un point de vue CSS pur à ma connaissance car les commentaires sont ignorés par CSS. J’obtiens l’erreur 500 dans Chrome et dans Firefox, j’obtiens une page vierge sans aucun view sourcecontenu.

Un peu plus d’infos pour comprendre d’où je viens : je viens de terminer 3 trimestres vers un associé en développement web et j’ai obtenu un A (4.0) en cours HTML5/CSS3 et Advanced CSS & Preprocessors. Je passe également un A en introduction à la programmation WordPress.

Comme je l’ai dit, je suis nouveau dans les thèmes enfants, et peut-être celui-ci est-il l’un de ces « pièges » que les développeurs WP expérimentés connaissent déjà.

MON PROCESSUS

J’ai suivi les étapes (avec une légère personnalisation) comme suit :

Thème WP gratuit installé et activé EightStore Lite .
Copié l’ intégralité du dossier du thème parent localement à partir de wp-content/themes/eightstore-liteet renommé la copie exacte du parent eightstore-lite-ehw-1.
Modifié style.css –> juste l’en-tête du commentaire. Voici le code original que j’ai copié et collé du Codex :

/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
Téléversé l’intégralité du dossier du thème enfant dans le wp-themesdossier sur le serveur et lancé le site Web. TRAVAILLÉ. Aperçu du thème enfant. TRAVAILLÉ.
Modification de l’en-tête du commentaire comme suit :

/* Theme Name: EightStore Lite - EHW - 1 Theme URI: https://wordpress.org/themes/eightstore-lite/ Description: EightStore Lite Child Theme Author: Eric Hepperle Author URI: http://erichepperle.com Template: eightstore-lite Version: 1.0.0 Date Created: 02/03/2017 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: eightstore-lite-ehw-1 */

Remarquez que j’ai changé tous les champs sauf Version, License, License URI, and Tags.
Re-téléchargé l’intégralité du dossier du thème enfant dans le wp-themesdossier sur le serveur et lancé le site Web. TRAVAILLÉ. Aperçu du thème enfant. TRAVAILLÉ.
Ajout de cette ligne, selon le didacticiel vidéo :

@import url("../eightstore-lite/style.css");
Re-téléchargé le thème enfant. Le thème est apparu dans le sélecteur de thème sous « Apparence ». C’est soit lorsque j’ai cliqué pour prévisualiser le thème ou pour l’activer que tout s’est détraqué. Erreur de chargement de la page reçue :

HTTP ERROR 500

La version finale du fichier style.css est :

/* Theme Name: EightStore Lite - EHW - 1 Theme URI: https://wordpress.org/themes/eightstore-lite/ Description: EightStore Lite Child Theme Author: Eric Hepperle Author URI: http://erichepperle.com Template: eightstore-lite Version: 1.0.0 Date Created: 02/03/2017 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: eightstore-lite-ehw-1 */

/* OLD WAY --> Not Recommended!:

@import url("../eightstore-lite/style.css"); */

Notez que ce fichier ne contient que des commentaires CSS.

MES QUESTIONS

Comment un fichier qui n’est que des commentaires CSS peut-il casser un site Web WordPress ?
Quel est le problème avec ma configuration ? Je veux dire, je n’ai même pas encore commencé à éditer le CSS actuel !
Quelle est la chose clé que je devrais savoir à l’avenir pour empêcher ce scénario de rupture de site Web WordPress ?

Toute aide est appréciée.

Solution n°1 trouvée

Félicitations pour le démarrage de votre premier thème enfant WordPress. Je vous recommande de gratter ce que vous avez (car nous ne savons pas exactement ce qui ne va pas) et de commencer par le thème enfant le plus simple possible. Ajoutez ensuite des éléments jusqu’à ce que quelque chose se casse ou que vous terminiez le thème enfant.

Pour démarrer sur un thème enfant très basique, créez un nouveau sous-répertoire dans le répertoire themes/. Ajoutez un fichier CSS contenant uniquement les éléments suivants :

/*
 * Theme Name:   My ChildTheme
 * Template:     eightstore-lite
 * Version:      1.0.0
 */

Assurez-vous que le thème eightstore-lite est actuellement installé. Activez le thème enfant. Félicitations pour votre premier thème enfant ! Utilisons maintenant le CSS de notre thème parent.

@import url(« ../eightstore-lite/style.css »);

Ce n’est pas la bonne façon d’utiliser le CSS d’un thème parent. La bonne façon de mettre en file d’attente le CSS d’un thème parent est d’utiliser le fichier functions.php du thème (ou un autre fichier appelé par functions.php). Créons donc un fichier appelé functions.php dans le même répertoire que votre fichier CSS avec le contenu suivant :

<?php
add_action( 'wp_enqueue_scripts', function() {
    //* Parent CSS
    wp_enqueue_style( 'eightstore-lite',
      get_template_directory_uri() . '/style.css' );

    //* Child CSS
    wp_enqueue_style( 'eightstore-lite-child',
      get_stylesheet_directory_uri() . '/style.css', [ 'eightstore-lite' ] );
} );

Maintenant, votre thème enfant utilisera le CSS des thèmes parents. Si vous regardez maintenant la partie publique de votre site, elle aura exactement la même apparence que si vous aviez activé le thème parent.

Ajoutez du CSS à votre style.css pour voir ce que cela fait. Vous avez maintenant un thème enfant qui utilise la fonctionnalité du thème parent avec un style CSS personnalisé.

Solution n°2 trouvée

Votre fichier style.css ne casse probablement pas le site. Comme vous vous en doutez, le CSS seul ne peut pas casser un site, mais s’il y a des problèmes avec votre thème dans son ensemble, l’activation du thème peut causer des problèmes.
Il semble que vous ayez copié l’intégralité du thème parent dans un thème enfant. Est-ce exact? Si c’est le cas, ce que vous devez vraiment faire est de démarrer le thème enfant à partir de zéro. Créez un tout nouveau fichier style.css, dans lequel vous pouvez coller les informations du thème parent et le mettre à jour avec vos propres informations avant de le télécharger. Ensuite, créez un tout nouveau fichier functions.php, où vous pourrez mettre cette feuille de style en file d’attente. Une fois que ces fichiers sont prêts, vous devriez pouvoir activer le thème et ne voir aucune erreur.
Félicitations pour s’être aventuré dans un nouveau territoire. Il est probable que vous cassiez votre site lorsque vous expérimentez pour la première fois des thèmes enfants. Conservez des sauvegardes et travaillez sur des sites intermédiaires ou de développement plutôt que sur des sites de production. De cette façon, si vous cassez quelque chose, vous n’affectez pas un site en direct.

Vous bénéficierez également grandement de l’examen du journal des erreurs PHP de votre site. Vous pouvez également activer WP_DEBUG pour voir les erreurs spécifiques à WP. Ces deux outils devraient vous aider à déterminer ce qui n’allait pas précisément lors de votre première tentative. Si vous avez bien copié tout le thème parent dans un thème enfant, c’est presque une garantie que des fonctions du même nom sont définies dans les deux thèmes, ce qui provoque une erreur fatale.

Solution n°3 trouvée

On dirait que les erreurs PHP sont désactivées et que vous avez une erreur PHP fatale.

S’ils sont enregistrés, vous devriez vérifier les journaux car ce serait votre meilleur pari pour découvrir ce qui ne va pas. Vous y trouverez l’erreur et la ligne à laquelle appartient l’erreur.