web-dev-qa-db-fra.com

Flux de travail pour développer / ajuster des modèles

En général, je n’ajuste que les modèles gratuits existants et modifie les couleurs et les polices. La question qui se pose est la suivante: quand ma page Joomla est-elle déjà en ligne, quel est le moyen le plus simple d’apporter des modifications au modèle css?

Actuellement, j'utilise les Outils de développement Chrome pour trouver et ajuster des styles spécifiques pour un aperçu. Si cela me convient, j'ajuste le fichier css du modèle directement dans l'éditeur en ligne de la zone d'administration.

Quand j'ai commencé et que je n'avais aucun contenu, j'ai utilisé un serveur Web local avec Joomla qui avait l'avantage de pouvoir utiliser un propre IDE pour écrire du code css et php. Depuis J'ai déjà du contenu maintenant, j'aimerais voir comment les changements que je fais ressemblent au contenu que j'ai.

Je sais qu'il s'agit d'une question fondamentale, mais existe-t-il un flux de travail préféré lorsque quelqu'un souhaite ajuster la conception d'un site existant?

templatesfonts
16
halirutan

Clonez le site de vie avec Akeeba, installez-le localement, puis ajustez-le si nécessaire. Lorsque vous avez terminé SSH/FTP, vos fichiers modifiés sont renvoyés sur le site actif.

Il y a une foule de bonnes raisons pour lesquelles il est imprudent de "Tweak" sur un site en direct…

10
Seth Warburton

Vous avez quelques options ici, selon que votre objectif est la facilité d'utilisation, l'automatisation ou les coûts:

  • Faites exactement ce que vous avez fait auparavant avec votre installation locale, mais une fois installé, modifiez l’installation locale de Joomla pour utiliser votre base de données MySQL distante en direct dans configuration.php, si votre hôte prend en charge l’accès à distance. Soyez prudent cependant - toute modification de base de données sera reportée en direct ...

  • Utilisez un composant tel que extplorer et modifiez les fichiers de modèle directement dans le navigateur, avec un autre onglet ouvert affichant le site, toujours à l'aide de Les outils de développement de Chrome. extplorer comporte une coloration du code et est idéal pour apporter rapidement de petites modifications.

  • Utilisez un système de contrôle de version pour appliquer les modifications - par exemple, développez votre modèle dans une installation Joomla locale à l'aide de l'EDI choisi, avec le modèle dans un référentiel. Une fois terminé, validez les modifications sur votre site actif. Utilisez un hook post-commit pour vérifier ces modifications en tant que version de travail. Bien que plus compliqué à installer, cela signifie que vous pouvez toujours revenir aux anciennes versions de modèles si vous faites une erreur. Ajoutez MySQL à distance pour assurer la cohérence des données entre le local et le réel.

  • Payer pour un modèle/cadre de modèle approprié - dans mon entreprise, nous utilisons YooTheme modèles. Ce framework de gabarit comporte une fonctionnalité appelée 'Customizr', qui est essentiellement une fenêtre à 2 volets contenant des centaines de variables CSS (ainsi, des variables LESS) à gauche et un aperçu en direct à droite. Ces variables contrôlent suffisamment tous les éléments du modèle, du remplissage de la gouttière à l'ombre du texte des éléments de menu, etc. Les modifications sont appliquées instantanément dans l'aperçu et plusieurs "styles" peuvent être définis pour que vous puissiez jouer avec différentes configurations variables. Ceci dit, je suis sûr que les autres frameworks de templates ont des fonctionnalités très similaires.

NB: Je n'ai aucune affliation avec Extplorer ni YooTheme autrement qu'en tant qu'utilisateur.

10
codinghands

Si vous ne faites que des modifications CSS, vous pouvez également continuer à les prévisualiser dans Chrome Outils de développement et en utilisant un environnement de développement en ligne tel que Cloud9 ou ShiftEdit vous pouvez vous connecter directement à votre serveur via FTP et apporter des modifications au site actif à l’aide d’un correct IDE similaire à ce que vous avez fait lorsqu’il était hébergé localement.

Je ne le recommanderais cependant pas pour des changements plus importants qui pourraient casser votre site (j'ai appris à la dure, il y a quelques années). Pour ceux-ci, je recommande de configurer un serveur local (ou un serveur gratuit VM de koding.com )], de cloner le site avec Akeeba et d’utiliser Git * to Push les changements sur votre site live une fois qu'ils ont été testés.

* Si vous ne voulez pas que votre code soit public sur GitHub , une bonne alternative est BitBucket .

6
Adam B

Méthode 1

Une méthode que j'ai utilisée consiste à ajouter mon propre fichier css dans le fichier modèle index.php. Cela peut être encapsulé pour ne l'ajouter que si vous êtes l'utilisateur.

Une façon de l'étendre est d'écrire un simple plugin qui ajoute un fichier css si vous êtes l'utilisateur. Je l'ai utilisé pour modifier le modèle d'administration par défaut, afin d'éviter de modifier directement le modèle susceptible d'être remplacé par la prochaine mise à jour.

Quelque chose comme...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Méthode 2

Pour prévisualiser les modifications apportées au modèle, vous pouvez dupliquer le modèle et y apporter des modifications. Pour afficher ces modifications, ajoutez "? Template = test" à l’URL, qui remplace le modèle. Remplacez "test" par le nom que vous avez choisi d'utiliser pour le duplicata.

Notez que vous devez dupliquer le modèle entier, et pas seulement un style. Les styles et les modèles peuvent être dupliqués dans l'interface graphique.

Je ne crois pas qu'il soit possible de remplacer un style dans l'URL. [PW: Je viens de découvrir que dans J3, vous pouvez remplacer un style dans l’URL. Voir la méthode 3.]

Méthode 3

Similaire à la méthode 2 mais avec des styles. Utilisez un style "test" et modifiez le modèle principal pour inclure la feuille de style de test. Pour remplacer un style dans l'URL, ajoutez? TemplateStyle =, où est l'identifiant du modèle (c'est-à-dire numérique).

5
Peter Wiseman