Créer une mise en page de remplacement

Créer une mise en page de remplacement avec le template purity III

Purity III fournit une variété de mises en page personnalisées pour com_content de Joomla tel que : Blog, Magazine, Portfolio, Features Intro, Glossary, et etc. Ces dispositions utilisent principalement le type de contenu article par défaut, sauf la mise en page Portfolio, qui utilise les extrafields supplémentaires : Special of state et Demo link en dehors de tout le champ d'origine à partir d'un article standard.

Fondamentalement, cela comprend les étapes suivantes :

1. Créer un type de contenu

  • Préparation des champs supplémentaires pour le type de contenu

  • Créer une catégorie de contenu

  • Attribuer des articles à la catégorie

2. Créer une mise en page personnalisée

  • Créer des éléments de menu - type layout overrides

Dans cet article, nous vous présenterons le processus de création de la mise en page Portfolio, une mise en page surchargeant ma mise en page Joomla par défaut.

Allons-y :

1: Créer le type de contenu Portfolio

Nous mettons l'étape dans une section indépendante car il peut être utilisé pour n'importe quelle disposition, non seulement mise en page portfolio.

2. Créer la mise en page portfolio

Dans cette section, nous vous présenterons comment créer la mise en page portfolio pour la vue catégorie à l'aide du type de surcharge de mise en page “Menu Items”

Pour créer 1 Type de mise en page de surcharge “Menu Items”, nous avons besoin d'un fichier xml et d'un fichier php avec le même nom. Dans ce cas, nous devons créer 2 fichiers portfolio.xml et portfolio.php dans le dossier templates/purity_iii/html/com_content/category . Le fichier portfolio.xml comprendra toutes les informations sur les paramètres de mise en page pour cette mise en page, dans le même temps, portfolio.php est un fichier template de mise en page.

2.1 portfolio.xml

Ce fichier a une structure similaire au fichierdefault.xml ou blog.xml dans le dossier components/com_content/view/category/tmpl .

portfolio xml

<?xml version="1.0" encoding="utf-8"?><metadata>  <layout title="xLayout - Portfolio" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">    <help      key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG"    />    <message>      <![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>    </message>  </layout>   <!-- Add fields to the request variables for the layout. -->  <fields name="request">    <fieldset name="request"     >       <field name="id" type="category"        description="JGLOBAL_CHOOSE_CATEGORY_DESC"        extension="com_content"        label="JGLOBAL_CHOOSE_CATEGORY_LABEL"        required="true"      />    </fieldset>  </fields>   <!-- Add fields to the parameters object for the layout. --><fields name="params">    <fieldset name="basic" label="Basic">        <!-- use layout type list, default layout type of view category -->        <field name="layout_type" type="hidden" default="list" />        <field name="display_num" type="text"           description="Number of items"           label="# Items"           size="3"           default="12"            />        …. (các params trong group basic)    </fieldset>     <fieldset name="article" label="COM_CONTENT_ATTRIBS_FIELDSET_LABEL">  ….     </fieldset>    ….</fields></metadata>

2.2 portfolio.php

De même que la mise en page par défaut de la vue catégorie, la mise en page porfolio affiche ces éléments dans une catégorie. Dans cette section, je vais surtout expliquer comment ajouter des données dans les champs supplémentaires du type de contenu Portfolio.

portfolio php

<?php/** * @version    $Id: category.php 303 2010-01-07 02:56:33Z joomlaworks $ * @package    K2 * @author    JoomlaWorks http://www.joomlaworks.gr * @copyright  Copyright (c) 2006 - 2010 JoomlaWorks Ltd. All rights reserved. * @license    GNU/GPL license: http://www.gnu.org/copyleft/gpl.html */ // no direct accessdefined('_JEXEC') or die('Restricted access'); $cols = $this->params->get('num_columns', 3);$span = floor(12 / $cols);$key = 0;$items = $this->items;?> <div class="porfolio<?php if ($this->params->get('pageclass_sfx')) echo ' ' . $this->params->get('pageclass_sfx'); ?>">   <?php if ($this->params->get('show_page_heading', 1)) : ?>  <div class="page-header">    <h1> <?php echo $this->escape($this->params->get('page_heading')); ?></h1>  </div>  <?php endif; ?>   <?php //JAHelper::loadModules('inline') ?>  <!-- Item list -->  <div class="porfolio-items">   <?php foreach ($items as $item):    ?>    <?php if ($key % $cols == 0) : ?>    <!-- Row -->    <div class="row row-porfolio">  <?php endif ?>       <div class="col-xs-6 col-md-<?php echo $span ?>">        <?php        // Load category_item.php by default        $this->item = $item;        echo $this->loadTemplate('item');        ?>      </div>       <?php if ((($key+1) % $cols == 0) || $key+1 == count($this->items)) : ?>      </div>      <!-- // Row -->    <?php endif ?>      <?php      $key++;    endforeach; ?>   </div>  <!-- // Item list -->   <!-- Pagination -->  <?php  if ($this->pagination->getPagesLinks()): ?>    <div class="pagination-wrap">      <?php echo $this->pagination->getPagesLinks(); ?>      <p class="counter pagination-counter">        <?php echo $this->pagination->getPagesCounter(); ?>      </p>    </div>  <?php endif; ?>  <!-- //Pagination --> </div>

Les données des champs supplémentaires utilisent pour afficher un élément dans le portfolio, dans la mise en page de type sublayout : portfolio_item.php. Lors de la création d'un élément Portfolio, ces extra fields seront stockés dans les attributs de champ de l'article et nous pouvons y accéder comme suit :

portfolio item

<?php$attribs = new JRegistry($this->item->attribs);// get extra fields$state = $attribs->get('portfolio-state');$demo_link = $attribs->get('portfolio-demo');?>

De là, nous pouvons utiliser ces champs supplémentaires comme les autres champs de l'article.

2.3 Style de template Portfolio

Étape 1 & 2: Créer un type de contenu: Portfolio et une mise en page Portfolio pour affichage category et com_content. Purity III a déjà un style pour le Portfolio layout, Ces styles sont stockées dans des fichiers dans le dossier templates/purity_iii:

portfolio php

  • tpls/portfolio.php - Fichier de mise en page

  • less/layouts/portfolio.less (lors de la compilation de less en css, il deviendra le fichier css/layouts/fortfolio.css )

Dans le fichier portfolio.php, vous pouvez définir le fichier CSS pour la mise en page Portfolio. Il en est de même pour les autres templates.

<?php $this->addCss('layouts/porfolio') ?>

Dans le Gestionnaire de template, créez un style Purity III - Portfolio, affecter la mise en page portfolio pour ce style sous l'onglet Layout.

portfolio 1

3. Utilisation de la mise en page Portfolio

Après avoir créé une catégorie nommée Portfolio et assigné avec succès le type de contenu Portfolio à cette catégorie, nous devons créer un élément de menu utilisant cette mise en page Portfolio.

portfolio 2

  1. Créer un nouveau lien de menu

  2. Sélectionnez le type de menu Article, choisir xLayout - Portfolio

  3. Sélectionnez catégorie Portfolio

  4. Sélectionnez style de template Purity III - Portfolio

  5. Configuration des autres options, autres champs puis cliquez sur Enregistrer

4. Et pour les autres mises en page ?

Comme pour la mise en page Portfolio, Purity III fournit d'autres agencements tels que Magazine, Blog, Feature-intro, Glossary, etc. Ces mises en page utilisent le même type de contenu: Article, par défaut le type de contenu de Joomla com_content.

Mise en page Magazine :

La mise en page magazine se compose des fichiers suivants dans le template Purity III templates/purity_iii

  • html/layouts

  • html/com_content/category/magazine.xml

  • html/com_content/category/magazine.php

  • html/com_content/category/magazine_featured.php

  • html/com_content/category/magazine_list.php

  • html/com_content/category/magazine-sub.php

  • tpls/magazine.php

  • less/layouts/magazine.less

  • helper.php

Mise en page Blog :

La mise en page blog se compose des fichiers suivants dans le template Purity III templates/purity_iii.

  • html/layouts

  • html/com_content/category/xblog.xml

  • html/com_content/category/xblog.php

  • html/com_content/category/xblog_item.php

  • tpls/blog.php

  • less/layouts/blog.less

Mise en page Feature-intro 1:

La mise en page Feature-intro 1 se compose des fichiers suivants dans le template Purity III templates/purity_iii.

  • html/layouts

  • html/com_content/category/features-intro.xml

  • html/com_content/category/features-intro.php

  • html/com_content/category/features-intro_item.php

  • tpls/features-intro-1.php

  • less/layouts/features-intro.less

Mise en page Glossary :

La mise en page Glossary se compose des fichiers suivants dans le template Purity III (templates/purity_iii):

  • html/com_content/category/glossary.xml

  • html/com_content/category/glossary.php

  • html/com_content/category/glossary_group.php

  • less/extras/glossary.less