Mover el título de la página CMS fuera del diseño normal
-
13-12-2019 - |
Pregunta
Tengo una página CMS con el 1 columna disposición.Me gustaría mover el título de la página fuera del contenedor principal de la página.La configuración actual es la siguiente:
<div class="main-container col1-layout">
<div class="main">
<div class="page-title">
<h1>Page Title</h1>
</div>
<p>Some content here..</p>
</div>
</div>
</div>
Me gustaría que el elemento del título de la página se ubicara fuera del contenedor principal.¿Se puede hacer esto mediante una actualización XML?
Solución
No puedes hacer esto con un simple xml de actualización de diseño.La forma más sencilla de lograrlo es crear una nueva plantilla raíz específica para su página cms.Los pasos para esto se detallan a continuación.
1.Archivo XML de actualización de diseño
Ir a CMS > Pages > [Select your CMS Page] > Design > Layout Update XML
sección.Coloque este código de actualización de diseño allí.
<!-- removing default page heading block -->
<reference name="content">
<remove name="page_content_heading" />
</reference>
<!-- defines new root template;add new page head block -->
<reference name="root">
<action method="setTemplate">
<template>custom/page/cms_1column.phtml</template>
</action>
<block type="core/template" name="cms_page_heading" as="cms_page_heading" template="cms/content_heading.phtml"/>
</reference>
Este código básicamente realiza 3 acciones.
Elimina el bloque de encabezado de página CMS predeterminado de los diseños;Por lo tanto, eventualmente eliminará la sección de título predeterminada que está viendo en su página cms.
Define una nueva plantilla raíz,
custom/page/cms_1column.phtml
para su página CMS;Explicaré por qué necesitamos esto.Nuevamente estamos redefiniendo el bloque de encabezado de página de CMS, pero esta vez viene dentro
root
bloquear y no dentrocontent
bloquear.
2.Definir plantilla raíz personalizada
Ahora crea un nuevo archivo app\design\frontend\[package]\[theme]\template\custom/page/cms_1column.phtml
y copie y pegue todo el contenido de app\design\frontend\[package]\[theme]\template\page/1column.phtml
a ese archivo.Luego llame a nuestro bloque de encabezado dentro de ese archivo de esta manera.
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<?php echo $this->getChildHtml('cms_page_heading') ?>
<div class="main-container col1-layout">
<div class="main">
...
Como se puede ver <?php echo $this->getChildHtml('cms_page_heading') ?>
esta parte representa el bloque de encabezado de la página CMS y aparece arriba diseño-div bloquear.Puede ajustar la posición del bloque de encabezado de página de su CMS según sus necesidades.
Estamos utilizando una nueva plantilla raíz solo para agregar este bloque de encabezado de página CMS personalizado.Esto evitará tocar los archivos principales y, por lo tanto, sería la mejor solución en este caso.
Otros consejos
Esto no se puede hacer con mi XML.Según el siguiente xml
<cms_page translate="label">
<label>CMS Pages (All)</label>
<reference name="content">
<block type="core/template" name="page_content_heading" template="cms/content_heading.phtml"/>
<block type="page/html_wrapper" name="cms.wrapper" translate="label">
<label>CMS Content Wrapper</label>
<action method="setElementClass"><value>std</value></action>
<block type="cms/page" name="cms_page"/>
</block>
</reference>
</cms_page>
El título de la página CMS proviene de content_heading.phtml
que se llama dentro del área de contenido.
Entonces, si lo desea fuera del contenedor principal, puede poner la condición en 1column.phtml
como
<?php if(Mage::app()->getRequest()->getRouteName() === 'cms' && $this->getContentHeading()):?>
<div class="page-title">
<h1><?php echo $this->getContentHeading(); ?></h1>
</div>
<?php endif; ?>
O una buena manera es que puede configurar su propio archivo raíz para la página CMS y cambiar ese archivo según sus necesidades.
Puede seguir los pasos para el nuevo diseño de la página cms. aquí