/image%2F0866179%2Fob_f475c7_bbpress-logo1-150x150.jpg){kind=logo}
Guide des étapes par étapes à la mise en place d’un forum BBPress - Partie 2
Guide des étapes par étapes à la mise en place d’un forum BBPress - Partie 2
Le forum est entièrement fonctionnel, mais vous aurez surement envie de changer l’apparence de celle-ci.
Si vous utilisez autre chose que le thème par défaut, je m’attends à ce que les couleurs ne soient pas bonnes, et si vous le souhaitez vous pouvez modifier certaines polices.
Vous pouvez également modifier l’emplacement où les éléments sont affichés. Ou ajouter d’autre fonction à votre site.
Il y a donc deux types de changement que nous pouvons faire sur votre site – changement de style – son apparence et changement de fonctionnalité – comment il fonctionne.
La modification de BBPress pour atteindre les deux est composée de quatre choses :
- Changement de CSS
- Ajout de plugin
- Modification des fichiers de fonction
- Modification des fichiers PHP
La partie 2 traite le changement de style qui signifie principalement la modification de CSS.
Résumé pour les pros :
Si vous êtes déjà en CSS, BBPress utilise par défaut un fichier appelé bbpress.css situé dans wp-content/plugins/bbpress/templates/default/css
Soit tout simplement ignorer le style de votre thème css, ou copier le bbpress dans un dossier /wp-content/themes/%your-theme%/css/
Et bbpress utilisera ce fichier pour effectuer des modifications.
Un style rapide de bbpress est disponible pour vous aider à démarrer.
Qu’est ce que le CSS ?
CSS signifie Cascade Style Sheet – C’est une façon simple de définir les éléments du site qui seront souvent utilisées.
Si par exemple les parties de votre site ont un titre vous pouvez encore une fois définir les styles (taille de police, couleur, la police utilisé, gras, italique etc.), ensuite il sera plus simple de se référer a chaque rubrique, c’est mieux que de le redéfinir à chaque fois.
Maintenant nous pouvons remplacer la valeur par défaut de l’élément CSS de 4 façons :
- Avec un plugin CSS
- Ajouter du code à notre thème style.css
- Copier/Créer une feuille de bbpress pour votre thème
- Avec des fonctions (voir ci-dessous)
a.Utilisations du plugin CSS
Il y a plusieurs choses autour, y compris http://wordpress.org/plugins/simple-custom-css/ juste Google peux vous en trouver un ‘wordpress css plugin’.
Faisant cela, vous pouvez ajouter du css à votre site sans à avoir codé votre fichier. Et si vous faites de petites modifications cela peut être un moyen simple sans craindre que vous allez détruire un fichier sur votre site web.
Cependant, si vous avez tout fait et qu’il y a des petits changements, vous ferez mieux de regarder les options restantes.
Ainsi, dans cette section nous allons travailler b & c.
Mais avons de faire cela, nous avons besoin de comprendre un peu plus sur la façon de modifier des fichiers sans perdre notre travail par la suite.
Modification des fichiers de présentation – avoir le thème enfant !
Pour que bbpress travail ou qu’il soit mieux sans plugin, nous avons besoins de changer les fichiers.
Maintenant, si nous avons changé tout simplement les fichiers dans bbpress, alors vous risquez de perdre toutes les modifications avec les mise à jour de bbpress, et détruire votre dur travail.
Ainsi, nous allons faire des changements dans nos thèmes WordPress, mettant de côté le répertoire bbpress de plugin.
Si vous êtes dans l’écriture de vos propres thèmes WordPress, alors je suppose que vous ferez une lecture en diagonale de cet article, donc le prochain point est pour ceux d’entre vous qui soit utilisent un WordPress par défaut (Twentyten, Twentyeleven etc.) ou ont choisi l’un des nombreux thèmes gratuits ou payants.
Si vous avez opté pour l’un cité plus haut, là encore si vous faites tout simplement des changements sur les thèmes alors toutes mises à jour faites sur le thème risquent de perdre ces changements, et à nouveau de défaire tout votre travail.
Si vous êtes un peu plus avancé, vous pouvez déjà avoir un thème « enfant » et c’est là-dessus que nous allons faire des ajouts et des modifications. Cette façon de mises à jour n’affectera pas les modifications que nous avons soigneusement élaboré.
Si vous n’avez pas actuellement un thème « enfant » WordPress, la meilleure façon de procéder est d’en créer un, puis vous pourrez y faire des modifications.
Si vous ne savez pas comment en créer un, vous trouverez des vidéos sur google sur les thèmes « enfants » WordPress avec beaucoup de démonstrations. Si quelqu’un a construit un site pour vous, il est peut déjà être conçut dans un thème « enfant », encore une fois les vidéos pourront vous dire si c’est le cas ou non.
Donc nous allons maintenant supposer que vous avez un thème « enfant »…
2. Modification des fichiers CSS
BbPress rassemble les styles utilisés dans votre thème pour certains éléments, mais il utilise ses propres scripts de style CSS pour les autres. Ce style CSS par défaut fonctionne bien avec le thème WordPress Twentyten mais peut ne pas correspondre totalement avec votre thème.
b. Ajouter du code au style CSS de votre propre thème « enfant »
La façon la plus simple de faire quelques changements est d’ajouter le code au style CSS de votre thème « enfant ».
Nous reviendrons plus tard sur les clés de code que vous voudrez peut-être changer, mais pour l'instant, supposons que vous n'aimez pas la façon dont bbPress répertorie les forums.
Voici à quoi ressemble le forum par défaut :
http://buddypress.org/wp-content/uploads/53/2013/11/forum2.jpg
Et vous voulez qu’il ressemble à :
http://buddypress.org/wp-content/uploads/53/2013/11/forum3.jpg
Cet élément est codé dans le fichier original de bbPress.css comme suit
#bbpress-forums .bbp-forums-list li {
display: inline ;
font-size: 11px;
}
Terminez en changeant le ‘display:inline’ à ‘display:list-item’. Mais comme nous l’avons dit ci-dessus, tandis que vous ne pouvez simplement modifier la ligne 121 (dans wp-content/plugins/bbpress/templates/default/css/bbpress.css) vous ne voulez pas changer cela, comme les mises à jour des versions bbPress pourraient les remplacer correctement.
Donc nous entrons simplement le code approprié dans le style.css de notre thème « enfant »
Nous pouvons entrer dans l’ensemble du « morceau » de code, ainsi si vous copiez de bbpress.css puis vous copiez l’ensemble du morceau, puis modifiez seulement les morceaux que vous voulez, cela vous aidera à mémoriser quels paramètres étaient là.
Donc
#bbpress-forums .bbp-forums-list li {
display: list-item !important;
font-size: 11px;
}
achieves this. Equally well you could post
#bbpress-forums .bbp-forums-list li {
display: list-item !important;
}
C’est-à-dire seulement les morceaux de code que vous voulez réellement changer.
Maintenant, vous avez dû remarquer que j’ai ajouté ‘!important’ à la ligne. C’est parce que notre fichier thème style.css sera exécuté en premier puis le bbpress.css (étant un plugin) sera exécuté après. Etant donné que le fichier bbpress.css contient le code original, cela va simplement écrire par-dessus les changements que vous avez effectué. En mettant ‘!important’ à la ligne, vous dites à WordPress de ne pas toucher à ce code.
C’est la méthode 1, utilisant le thème enfant de votre style.css
C. copier/créer une feuille de style dans votre thème enfant
L'autre méthode consiste à prendre une copie de bbpress css par défaut ou créer une nouvelle marque, et mettre cela dans une zone spécifique de votre thème que bbpress cherche.
Pour les fichiers .css, bbpress regarde vos fichiers thèmes à cet emplacement :
/wp-content/themes/%votre-theme%/css/
Où %votre-theme% est le nom du répertoire actuel de votre thème.
Donc, n'importe quel fichier ccs. trouvé à cet endroit sera utilisé. Je ne suis pas sûr que ce soit à la place du fichier bbpress.css dans l’emplacement par défaut du plugin ou en plus de cela. Vous aurez besoin de vérifier cela vous-même.
Donc le mieux à faire est de copier le bbpress.css depuis wp-content/plugins/bbpress/templates/default/css/bbpress.css
Vers un répertoire appelé css comme celui dans votre répertoire thème.
Vous pouvez ensuite modifier le contenu de votre thème selon vos goûts, en sachant qu'il ne sera pas écrasé par les mises à niveau de bbPress.
Donc si vous êtes maintenant prêt à changer le code, qu’est-ce que vous pouvez changer ?
Regardons bbPress styling crib pour vous aider à démarrer.
Changer les couleurs
Pour les personnes commençant avec css, savoir de quelle couleur est quelque chose peut être difficile. Donc, si votre thème principal a un fond d'un bleu clair - comment voulez-vous obtenir exactement la même nuance dans bbpress.
Les personnes plus techniques utiliseront les fonctionnalités inclues dans leur navigateurs pour accéder aux informations sous-jacentes. Par exemple beaucoup de gens utilisent un produit appelé "Firebug" avec un navigateur Firefox pour leur montrer exactement ce qui se passe, y compris quelles sont les couleurs exactes utilisées pour le texte et les fonts.
Ces outils peuvent être extrêmement utiles comme vous progressez, et il vaut la peine de les connaître si vous prévoyez plus de quelques changements.
Google "Firebug video" pour obtenir beaucoup d’aide tel que Firebug tutorial
Une alternative si les couleurs sont ce que vous recherchez est d'utiliser un produit comme ColorCop qui vous permettra de voir exactement quelle couleur est utilisée sur n'importe quelle partie de votre écran, de sorte que la copie des couleurs de votre propre thème ou de quelqu'un d'autre soit vraiment facile.
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
