Améliorer com_content

Dans Purity III, nous ajoutons des paramètres supplémentaires - extra fields. Voici les étapes de l'ajout de champs supplémentaires dans Purity III.

Dans la rédaction de cet article, nous vous présenterons l'ajout de champs supplémentaires utilisés dans la page Portfolio.

Fondamentalement, cela comprend les étapes suivantes :

• Créer un groupe de champs supplémentaires en ajoutant un fichier portfolio.xml.

• Définir des champs supplémentaires dans le fichier créé portfolio.xml.

• Ajout de style pour les champs supplémentaires.

• Affecter un groupe de champs supplémentaires dans le contenu de catégorie Joomla - Catégorie portfolio.

• Affecter un champ supplémentaire pour chaque article dans la catégorie portfolio

Étape 1: créer un fichier portfolio.xml

Créer un fichier portfolio.xml dans templates/purity_iii/etc/extrafields/. Le fichier.xml consiste à déclarer des champs supplémentaires pour le type de contenu de portfolio.

<?xml version="1.0" encoding="utf-8"?><form>    <fields name="attribs">        <fieldset name="extra-fields" label="Extra Fields" description="Extra Fields">            <field name="portfolio-state" type="list" default="" label="Special State"                   description="Product Special State">                <option value="">None</option>                <option value="current">Current</option>                <option value="hot">Hot</option>                <option value="free">Free</option>            </field>            <field name="portfolio-demo" type="text" class="input-xxlarge" default="" label="Demo Link" description="Product demo link" />        </fieldset>    </fields></form>

Étape 2: ajouter le style des champs supplémentaires

Vous pouvez ajouter de style pour chaque champ dans n'importe quel fichier .less dans templates\purity_iii\less. dans Purity III, le style de champs supplémentaires utilisés dans la mise en page Portfolio est stocké dans le fichier portfolio.less dans templates\purity_iii\less\layouts.

// Porfolio Extra Fields// ---------------------.porfolio {  // State  .item-state {    width: 70px;    height: 70px;    background: url(../../images/porfolio-item-states.png) no-repeat center top;    display: block;    text-indent: -9999em;    position: absolute;    top: -3px;    right: -3px;  }  .state-free {    background-position: center;  }  .state-hot {    background-position: center bottom;  }  // Demo URL  .item-demo-url {    margin-top: @t3-global-margin / 2;  }}

Étape 3: créer une catégorie de contenu.

Créer une catégorie de contenu nommée Portfolio. Dans l'onglet Extra fields, choisir Portfolio comme option Extra field group.

Étape 4: attribuer des champs supplémentaires pour les articles dans la catégorie Portfolio

Lorsque vous créez un article, après l'avoir attribué à la catégorie portfolio, des champs supplémentaires apparaîssent alors sous l'onglet Extra field.

Aperçu en Front-end

 

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 .

<?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.

<?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 :

<?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...

Déplacer la mise en page créée dans purity III vers d'autres templates T3 framework

Si vous utilisez un autre template développé avec T3 Framework, vous pouvez déplacer n'importe quelle mise en page en Purity III dans votre template.

Important:

Dans ce fil, nous allons déplacer une mise en page « Magazine » dans JA Bookshop - un template Joomla développé avec T3 framework. Les instructions sont les mêmes pour les autres mises en page.

Les qualités requises de template vers lequel vous pouvez déplacer une mise en page Purity III :

• Joomla 3.x

• Le template doit être développé avec T3 Framework (version 2.1.0 et supérieur)

• Le template doit utiliser base-bs3 (bootstrap 3). Dans le cas contraire, vous devrez personnaliser les fichiers layout & less pour les faire fonctionner with bootstrap 2.

Voici les étapes rapides pour apporter votre mise en page Magazine dans un template Joomla développé avec T3 framework :

Étape 1: déplacer les fichiers/dossiers

Copier les fichiers et les dossiers dans templates/purity_iii dans le chemin correspondant de votre dossier de template:

helper.php

html/layouts html/com_content/category/magazine.php

html/com_content/category/magazine.xml

html/com_content/category/magazine-sub.phphtml/com_content/category/magazine_featured.php

html/com_content/category/magazine_list.php

tpls/magazine.phpless/layouts/magazine.less

Étape 2 : déplacer la langue

Veuillez déplacer langue de la mise en page Magazine. Ouvrez votre fichier de langue de template (Il devrait être situé dans: language/en-GB/en-GB.tpl_ja_bookshop) puis ajouter les lignes de langue suivante. Vous pouvez franciser les entrées de langues.

; Overwrite menu item

TPL_MAGAZINE_HOME_LABEL          ="Magazine Home"

TPL_MAGAZINE_HOME_FEATURE_CONFIG_LABEL   ="Configuration for Featured articles"

TPL_MAGAZINE_FEATURED_NUM_COLUMNS_DESC   ="Number of columns which to show Feature Articles"

TPL_MAGAZINE_FEATURED_NUM_COLUMNS_LABEL  ="# Featured columns"

TPL_MAGAZINE_FEATURED_NUM_LINKS_DESC     ="Number of featured links articles"

TPL_MAGAZINE_FEATURED_NUM_LINKS_LABEL    ="# Featured links articles"

TPL_MAGAZINE_HOME_CATEGORY_LIST_CONFIG_LABEL      ="Configuration for category list"

TPL_MAGAZINE_HIGHLIGHT_NUM_ARTICLE_DESC  ="Number of category articles"

TPL_MAGAZINE_HIGHLIGHT_NUM_ARTICLE_LABEL ="# Articles"

TPL_MAGAZINE_HIGHLIGHT_NUM_COLUMN_DESC   ="Number of columns which to show articles for a category"

TPL_MAGAZINE_HIGHLIGHT_NUM_COLUMN_LABEL  ="# columns"

TPL_MAGAZINE_HIGHLIGHT_SHOW_INTRO_DESC   ="Show Intro text in category list articles"

TPL_MAGAZINE_HIGHLIGHT_SHOW_INTRO_LABEL  ="Article intro text"

TPL_MAGAZINE_ENTRY_INTRO_POSITION_DESC   ="Select positions to show Article Info"

TPL_MAGAZINE_ENTRY_INTRO_POSITION_LABEL  ="Article Info positions"

TPL_MAGAZINE_ENTRY_INTRO_POS_FEATURED    ="Featured Leading"

TPL_MAGAZINE_ENTRY_INTRO_POS_INTRO       ="Featured Intro"

TPL_MAGAZINE_ENTRY_INTRO_POS_LINKS       ="Featured Links"

TPL_MAGAZINE_ENTRY_INTRO_POS_HIGHLIGHT   ="Category list articles"

TPL_MAGAZINE_HOME_CONFIG_LABEL           ="General Configuration for Magazine Home"

TPL_MAGAZINE_SUB_LABEL                   ="Magazine category"

TPL_MAGAZINE_SUB_CONFIG_LABEL            ="Configuration for category layout"

TPL_MAGAZINE_SUB_INTRO_POSITION_DESC     ="Select positions to show Article Info"

TPL_MAGAZINE_SUB_INTRO_POSITION_LABEL    ="Article Info positions"

TPL_MAGAZINE_SUB_INTRO_POS_LEADING       ="Leading"

TPL_MAGAZINE_SUB_INTRO_POS_INTRO         ="Intro"

TPL_MAGAZINE_SUB_INTRO_POS_LINKS         ="Links"

TPL_MAGAZINE_SUB_SHOW_INTRO_DESC         ="Show Intro Text in category intro articles"

TPL_MAGAZINE_SUB_SHOW_INTRO_LABEL        ="Show Intro Text" 

TPL_MAGAZINE_ARTICLE_LABEL               ="Magazine Article"

TPL_MAGAZINE_ARTICLE_LAYOUT_LABEL        ="Article Layout" 

TPL_MAGAZINE_ARTICLE_INFO_LABEL          ="Article Info Options"

 

Étape 3: créer le style magazine

Vous pouvez créer un style de template Magazine en dupliquant le style par défaut

Attribuer la mise en page magazine au style de template

Étape 4: ajouter du contenu à afficher pour la page du magazine

Créer une catégorie Joomla puis ajouter des articles à la catégorie.

Étape 5: créer lien de menu Magazine

Assurez-vous que le menu est de type Articles >> xLayout - Magazine. Affecter la nouvelle catégorie créée à cet élément de menu

Étape 6: compiler LESS en CSS

Cette étape permettra de compiler magazine.less vers fichier magazine.css. Ouvrez n'importe quel style de template, puis cliquez sur le bouton LESS to CSS.

Important:

Si votre template utilise bootstrap 2, vous devrez peut-être personnaliser les BALISES et CSS dans les fichiers.

Apparence en Front-end :