Construire des plugins octobrecms: Google Analytics

Développement du plugin d'octobre: ​​un exemple de Google Analytics

OCTOBSCMS est un système de gestion de contenu en croissance rapide (CMS), et comme toutes les plates-formes CMS, ses fonctionnalités sont améliorées grâce aux plugins. Cet article fournit un guide fondamental pour créer un plugin d'octobre, en utilisant une intégration Google Analytics comme exemple pratique.

Concepts clés:

• L'extensibilité d'octobre à travers les plugins permet des intégrations transparentes, telles que l'ajout de suivi de Google Analytics.
• L'interface de ligne de commande simplifie la création et la gestion du plugin, en complétant l'interface graphique au sein du CMS (System & GT; Mises à jour).
Les composants
• sont cruciaux pour l'interaction utilisateur; Ils sont créés via la ligne de commande ou manuellement, nécessitant un dossier «Composants» dédié.
• Une personnalisation approfondie est possible, y compris la création de formulaires de paramètres pour la saisie de l'utilisateur (comme l'ID de suivi Google Analytics) et la récupération de ces paramètres à utiliser dans les composants.

Présentation du projet:

Nous allons créer un plugin qui intègre le suivi Google Analytics à l'aide d'une balise de composant. Après avoir configuré votre ID de suivi dans les paramètres du plugin, vous insérez la balise de composant ({% component 'gaCode' %}) dans vos pages ou partiels pour activer le suivi. Le code complet est disponible sur github.

Gestion du plugin:

Les plugins

Octobrecms résident dans le dossier plugins du répertoire racine. La gestion est gérée par:

• Système & gt; Mises à jour: Cette page permet de joindre des projets (nécessitant un compte octobreCMS), d'ajouter des plugins Marketplace et de mettre à jour votre site Web.
• Ligne de commande: Installez les plugins à l'aide de la ligne de commande (bien que trouver le nom du plugin sur le site Web soit nécessaire). Le format de commande (au moment de la rédaction) implique généralement Author.PluginName.

Création du plugin:

La création d'un plugin est rationalisée:

• Méthode manuelle: Créez un nouveau dossier dans le répertoire plugins. Le nom du dossier agit comme votre espace de noms unique (enregistrez votre espace de noms sur le site Web d'octobre pour éviter les conflits). Pour cet exemple, nous utiliserons RAFIE.GoogleAnalyticsCode. À l'intérieur, créez un fichier Plugin.php.
• Échafaudage (ligne de commande): Utilisez la commande php artisan create:plugin RAFIE.GoogleAnalyticsCode. Cela génère automatiquement les fichiers et dossiers nécessaires, y compris un dossier uploads contenant un fichier version.yaml pour le contrôle de version.

La méthode Plugin.php du fichier pluginDetails() (remplacement SystemClassesPluginBase) définit le plugin:

public function pluginDetails() {
    return [
        'name'        => 'Google Analytics Code',
        'description' => 'Insert Google Analytics tracking code into your pages',
        'author'      => 'RAFIE Younes',
        'icon'        => 'icon-bar-chart-o'
    ];
}

Si le plugin n'apparaît pas, cliquez sur "Vérifiez les mises à jour" pour actualiser la liste.

Utilisation de composants:

Les composants permettent une interaction avec la page. Créez-les manuellement (dans un dossier components) ou via la ligne de commande:

php artisan create:component RAFIE.GoogleAnalyticsCode GoogleAnalytics

La méthode componentDetails() (remplacement CmsClassesComponentBase) définit les détails du composant pour le tableau de bord de l'administrateur. Enregistrez le composant dans la méthode Plugin.php S registerComponents():

public function registerComponents() {
    return [
        'RAFIE\GoogleAnalyticsCode\Components\GoogleAnalytics' => 'gaCode'
    ];
}

Le composant rend initialement default.htm:

<p>></p>This is the default markup for component GoogleAnalytics>
<small>></small>You can delete this file if you want>

Remplacez cela par le code de suivi de Google Analytics:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', '{{ code }}', 'auto');
ga('send', 'pageview');

N'oubliez pas que le script devrait idéalement être placé à la fin de la page, selon votre thème.

Propriétés et paramètres des composants:

Au lieu de codage en dur l'ID de suivi, utilisez les propriétés des composants:

{% component 'gaCode' code='UA-12345678-1' %}

Définissez les propriétés en utilisant defineProperties():

public function defineProperties() {
    return [
        'code' => [
            'title'             => 'Google Analytics tracking code',
            'description'       => 'Your Google Analytics tracking code',
            'default'           => '',
            'type'              => 'string',
            'validationPattern' => '^UA-\d{4,9}-\d{1,4}$',
            'validationMessage' => 'Invalid tracking code',
            'placeholder'       => 'UA-XXXXXXX'
        ]
    ];
}

Utilisez onRender() pour transmettre des valeurs à la page:

public function onRender() {
    $this->page['code'] = $this->property('code');
}

Pour une approche plus conviviale, utilisez les paramètres du plugin:

Créer models/GoogleAnalyticsSettings.php:

class GoogleAnalyticsSettings extends Model {
    public $implement = ['System.Behaviors.SettingsModel'];
    public $settingsCode = 'rafie_google_analytics_code';
    public $settingsFields = 'fields.yaml';
}

Créer models/fields.yaml:

fields:
  code:
    label: Your Google Analytics ID
    placeholder: UA-XXXXXXXX-X

Enregistrer les paramètres dans Plugin.php:

public function registerSettings() {
    return [
        'settings' => [
            'label'       => 'Google Analytics Code',
            'description' => 'Manage Google Analytics Settings',
            'icon'        => 'icon-bar-chart-o',
            'class'       => 'RAFIE\GoogleAnalyticsCode\Models\GoogleAnalyticsSettings',
            'order'       => 1
        ]
    ];
}

Récupérer les paramètres dans onRender():

public function onRender() {
    $settings = GoogleAnalyticsSettings::instance();
    $this->page['code'] = $settings->code;
}

Conclusion:

OCTOBSCMS propose un système de développement de plugin robuste et flexible. Cet exemple démontre les principes fondamentaux; Une exploration plus approfondie du code source et des ressources communautaires améliorera votre compréhension.

Questions fréquemment posées (FAQ): (Les FAQ fournis sont déjà bien structurés et complets. Aucune modification nécessaire.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!