Cambiar el menú superior. PdoMenu - creando un menú en el menú vertical MODX Modx

Fragmento de generación de menú. Puede reemplazar Wayfinder y permite una mayor flexibilidad en la especificación de parámetros.

Por ejemplo, puede crear un menú de varios padres a la vez, mostrándolos juntos y como ramas separadas.

Se proporciona un aumento significativo en la velocidad solo en el primer inicio, más Wayfinder no es particularmente inferior, gracias al almacenamiento en caché competente.

Opciones

Por defecto, pdoMenu acepta parámetros generales de pdoTools y algunos propios:

Nombre	Defecto	Descripción
& padres	Recurso actual	Lista de padres para los resultados de la búsqueda, separados por comas. Si pones & padres = `0`- la muestra no está limitada. Si la identificación del padre comienza con un guion, este y sus hijos se excluyen de la selección.
& nivel	0 (ilimitado)	Nivel de menú generado.
& recursos		Lista de recursos para mostrar en los resultados, separados por comas. Si la identificación de un recurso comienza con un guión, ese recurso se excluye de la selección.
y plantillas		Lista de plantillas para filtrar resultados, separadas por comas. Si un ID de plantilla comienza con un guión, los recursos que lo contengan se excluyen de la selección.
& dónde		Matriz codificada en JSON de parámetros de recuperación adicionales.
& displayStart	0	Habilite la visualización de los nodos de inicio del menú. Útil cuando se especifica más de un padre.
y contexto		Restringir la selección por contexto de recurso.
& showHidden	0	Mostrar recursos ocultos en el menú.
& showUnpublished	0	Muestra recursos no publicados.
& vista previa	0	Habilite la visualización de recursos no publicados si el usuario tiene permiso para hacerlo.
& hideSubMenus	0	Ocultar ramas de menú inactivas.
& Seleccione		Lista de campos para seleccionar, separados por comas. Puede especificar una cadena JSON con una matriz, por ejemplo & select = `(" modResource ":" id, pagetitle, content ")`
& Ordenar por	menuindex	Cualquier campo de recurso para ordenar, incluido el parámetro TV, si se especifica en el parámetro & includeTVs, por ejemplo & sortby = `(" tvname ":" ASC "," pagetitle ":" DESC ")`... Puede especificar una cadena JSON con una matriz de varios campos. Para clasificación aleatoria, especifique & sortby = `ALEATORIO ()`
& sortdir	ASC	Dirección de clasificación: descendente o ascendente. Si deja vacíos los parámetros & sortby y & sortdir, la clasificación irá en el orden de los recursos en & recursos.
& límite	0	Limitar el número de resultados de la muestra.
& compensar	0	Omitir resultados desde el principio. Debe usarse junto con el especificado explícitamente & límite
& checkPermissions		Especifique qué permisos debe verificar el usuario al mostrar recursos, por ejemplo & checkPermissions = `lista`.
& countChildren	0	Recuento exacto del número de recursos secundarios de cada categoría y mostrarlos en el marcador de posición [[+ niños]]. Realiza consultas adicionales a la base de datos, por lo que está deshabilitada de forma predeterminada.
& toPlaceholder		Si no está vacío, el fragmento guardará todos los datos en un marcador de posición con este nombre en lugar de mostrarse en la pantalla.
& plPrefix	wf.	Prefijo para marcadores de posición colocados.
& Mostrar registro	0	Muestra información adicional sobre el trabajo del fragmento. Solo para los autorizados en el contexto "mgr".
& modo rápido	0	Modo de procesamiento rápido de fragmentos. Se cortarán todas las etiquetas sin procesar (condiciones, fragmentos, etc.).
& caché	0	Almacenamiento en caché de resultados de fragmentos.
& Tiempo de Cache	3600	Tiempo de validez de la caché, en segundos.
y esquema	-1	El esquema de formación de URL se pasa a modX :: makeUrl (), por lo que se necesitan las opciones posibles. El tipo de uri especial sustituye el valor de uri del recurso sin ejecutar la función.
& useWeblinkUrl	1	Genere un enlace basado en la clase de recurso.
& rowIdPrefix		Prefix id = "" para configurar el identificador en el fragmento.
& hereId		id del recurso actual para el menú generado. Solo debe especificarlo si el propio script lo define incorrectamente, por ejemplo, al mostrar un menú de un fragmento de otro fragmento.
& includeTVs		Lista de parámetros de TV para seleccionar, separados por comas. Por ejemplo & includeTVs = `acción, tiempo` dará marcadores de posición [[+ acción]] y [[+ tiempo]].
& prepareTVs		Lista de parámetros de TV, con archivos de fuentes de medios, para los que es necesario generar rutas completas. Si instala & prepareTVs = `1`, todos los televisores especificados en & includeTVs.
y televisores de proceso		Lista de parámetros de TV que se procesarán y mostrarán de acuerdo con su configuración en el administrador del sistema. Si instala & processTVs = `1`, todos los televisores especificados en & includeTVs... Ralentiza el trabajo.
& tvPrefix		Prefijo para parámetros de TV.

Parámetros de plantilla

Estos parámetros establecen fragmentos que contienen plantillas para generar menús.

Nombre	Descripción
& tplOuter	Parte del diseño de todo el bloque de menú. Predeterminado: @INLINE [[+ envoltorio]]
& tpl	Parte del diseño del elemento del menú. Si no se especifica, el contenido de los campos de recursos se imprimirá en la pantalla. Predeterminado: @INLINE [[+ menutitle]] [[+ wrapper]]
& tplAquí	Parte del diseño del elemento de menú actual.
& tplStart	Parte del registro del elemento raíz, siempre que esté incluido & displayStart... Predeterminado: @INLINE [[+ menutitle]] [[+ envoltorio]]
& tplParentRow	Parte del diseño del padre con descendientes que no coincide con las condiciones de & tplCategoryFolder. Por ejemplo: @INLINE [[+ menutitle]] [[+ wrapper]]
& tplParentRowHere	Parte del diseño del documento actual, si contiene elementos secundarios.
& tplParentRowActive	Parte del registro de padres con descendientes en la rama del menú activo.
& tplCategoryFolder	Un trozo especial para la categoría. La categoría se considera padre con hijos, que tiene una plantilla vacía o rel = "categoría" en el campo link_attributes.
& tplInner	Parte del diseño de todo el bloque de subelementos del menú. Si está vacío, usará & tplOuter... Por ejemplo: @INLINE [[+ envoltorio]]
& tplInnerRow	Parte del registro de un subelemento del menú. Por ejemplo: @INLINE [[+ menutitle]] [[+ wrapper]]
& tplInnerHere	Parte del registro del subelemento activo del menú.

Parámetros de clase CSS

Estos parámetros establecen el valor de los marcadores de posición [[+ nombres de clase]] y [[+ clases]] para varios elementos del menú. El marcador de posición [[+ nombres de clase]] muestra solo el nombre de la clase sin atributo clase = "", a diferencia del marcador de posición [[+ clases]].

Ejemplos de

Salida de menú normal desde la raíz del sitio a un nivel:

[]

Salida excluyendo padres específicos y verificación de permisos de usuario:

[]

Visualización de un menú de dos padres a la vez, mostrando los puntos raíz:

[]

Mostrando dos niveles de recursos, contando el número de recursos anidados:

[] `& tplParentRow =` @ INLINE

[[+ menutitle]] ([[+ children]])

[[+ envoltorio]] `& countChildren =` 1`]]

Wayfinder sirve para organizar listas de enlaces para MODX. Gracias al soporte de plantillas, le permite mostrar listas en cualquier forma necesaria:

• Menú en forma de lista, tabla, imágenes, iconos, etc.
• Menús estáticos
• Menús con varios efectos (desplegable, desplegable, etc.)
• mapa del sitio

Ejemplo de llamada:

& rowTpl = `rowTpl`
& externalTpl = `externalTpl`
& hereClass = `activo`
& rowClass = `eNav_li`]]

Parámetros de fragmentos:

& startId- id de la página principal, si especifica 0, será de la raíz del sitio. El valor predeterminado es la identificación de la página activa.

& displayStart - muestra el documento con startId en el título del menú, por defecto es falso

& nivel- profundidad de anidación, por defecto 0 - todos los niveles

& límite- limitar el número de páginas en la salida (por defecto 0 - sin límite)

& ignoreHidden- ignore la casilla de verificación de la página "Mostrar en el menú", es decir si especifica 1, mostrará todas las páginas. El valor predeterminado es 0. Solo se muestran las páginas que tienen seleccionada la casilla de verificación "Mostrar en el menú".

& ph - el nombre del sustituto de los resultados mostrados directamente. El valor predeterminado es 0.

& depurar- modo de depuración (predeterminado 0)

& hideSubMenus - expandir solo el submenú activo (predeterminado 0)

& removeNewLines- elimina el carácter de avance de línea en la salida (predeterminado 0)

& textOfLinks- para el nombre del enlace del menú. Posibles opciones:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. Defecto menutitle

& titleOfLinks- para el título del enlace del menú. Opciones:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. Defecto Título de la página

& rowIdPrefix- establece id (rowIdPrefix + docId) para cada elemento. Predeterminado 0

& includeDocs- id de los documentos separados por comas que se incluirán en el menú (no especificado por defecto)

& excludeDocs - id de documentos separados por comas, que se excluirán del menú (predeterminado 0)

y contextos- contexto para generar el menú. El valor predeterminado es actual.

& startIdContext - El identificador del contexto del que se toman los documentos para formar el resultado.

& config - Archivo PHP externo para almacenar la configuración de Wayfinder (ejemplo: core / components / wayfinder / configs).

y esquema - Formato para generar URL. Valores posibles (basados ​​en la llamada a la API makeURL):

1: (predeterminado) URL relativa a site_url;

0: ver http;

1: ver https;

completo: una URL absoluta que comienza con site_url;

abs: una URL absoluta que comienza con base_url;

http: una URL absoluta, forzada al esquema http;

https: una URL absoluta, forzada al esquema https.

& Ordenar por - El campo por el cual ocurre la clasificación. (defecto menuindex)

Las opciones son:

identificación, menutitle, pagetitle, introtext, menuindex, publicado, hidemenu, parent, isfolder, description, alias, longtitle, type, template

& Orden de clasificación- Orden de clasificación."ASC" o "DESC". ASC predeterminado

& dónde - Parámetros de filtro de estilo JSON (Coincide con dónde en MySQL)... Por ejemplo, cuando desee ocultar un blog o noticias del complemento Artículos: & where = `[(" class_key :! = ":" Artículo ")]`
Ejemplos:
salida solo carpetas: & where = `isfolder = 1

& hereId - Determine el ID actual que se utilizará en el fragmento. Use el valor [[* id]] si la plantilla se especifica usando el parámetro hereTpl y activeRowParentTpl no se está aplicando correctamente en el elemento del menú. De forma predeterminada, el ID actual.
Solo debe especificarlo si el propio script lo define incorrectamente, por ejemplo, al mostrar un menú de un fragmento de otro fragmento.

& hereTpl - La plantilla hereTpl se utiliza cuando el elemento actual se muestra en el menú.
Posibles marcadores de posición:
[[+ wf.classes]]: un lugar para especificar la clase CSS utilizada (incluye class = "")
[[+ wf.classnames]]: contiene solo el nombre de la clase CSS (no incluye class = "")
[[+ wf.link]]: dirección (href) para el enlace
[[+ wf.title]]: texto para el título del enlace
[[+ wf.linktext]]: texto del título del enlace
[[+ wf.wrapper]]: lugar para mostrar el submenú
[[+ wf.id]]: muestra un identificador único (id)
[[+ wf.attributes]]: muestra atributos de enlace adicionales
[[+ wf.docid]]: identificador de documento para el elemento actual
[[+ wf.subitemcount]] -número de elementos en la carpeta
[[+ wf.description]]: muestra los valores del campo de descripción
[[+ wf.introtext]]: muestra los valores del campo de introtexto

Plantilla de ejemplo: [[+ wf.linktext]] [[+ wf.wrapper]]

Parámetros de plantilla

Estos parámetros especifican los fragmentos que contienen plantillas que generarán la salida de Wayfinder.

En la versión actual de Wayfinder para MODX Revolution, puede acceder a su televisor personalizado utilizando los marcadores de posición del prefijo wf. p. ej., [[+ my_TV]]

En el momento de escribir este artículo, solo se devolverán los valores de TV originales; no se formatearán. Por ejemplo, si su televisor es una imagen, el uso habitual de dicho televisor dentro de su plantilla devolverá la etiqueta de imagen completa, pero dentro de una plantilla de Wayfinder, solo se devolverá la ruta a la imagen.

Si desea manejar TV, puede hacerlo llamando a un fragmento dentro de la plantilla de fila de Wayfinder (& rowTpl. Por ejemplo, su imagen de TV se llama icono y normalmente se utiliza el siguiente código para la salida en la plantilla:

... ...

Pero como eso no le permitirá manejar la TV, debe reemplazarla con:

... ...

Y ahora ponemos el siguiente código PHP dentro del fragmento de processTV:

getObject ("modResource", $ myId); return $ doc-> getTVValue ($ myTV);

Como resultado, se devuelve una imagen de TV completamente procesada.

& externalTpl

El nombre del fragmento que contiene la plantilla para el contenedor exterior.

Marcadores de posición disponibles:

• wf.classes: muestra las clases tomadas de un conjunto de parámetros de Wayfinder (incluido el atributo class = "")
• wf.classnames: muestra los nombres de las clases (sin class = "")
• wf.wrapper: muestra el contenido interno (fila).

[[+ wf.wrapper]]

El parámetro & innerTpl contiene el mismo conjunto de marcadores de posición que & externalTpl.

& rowTpl

Nombre del fragmento que contiene la plantilla para los elementos de la fila del menú.

Marcadores de posición disponibles:

• wf.classes - salida de clase (incluido el atributo class = "")
• wf.classnames - muestra las clases correspondientes (sin class = "")
• wf.link: el valor del atributo href = "" para el enlace del menú
• wf.title: el nombre del texto del título del enlace del campo especificado en el parámetro & titleOfLinks
• wf.linktext: el texto del enlace activo especificado en el campo pasado en el parámetro & textOfLinks
• wf.wrapper: muestra contenido interno, como un submenú
• wf.id: muestra el ID único del atributo. Debe especificar el parámetro & rowIdPrefix para que este marcador de posición reciba un valor. El valor es el prefijo docId.
• wf.attributes: imprime el enlace de atributo para el elemento actual
• wf.docid: ID de documento del elemento actual
• wf.description: descripción del elemento actual
• wf.level - nivel de anidamiento actual

Ejemplo de uso:

[[+ wf.linktext]] [[+ wf.wrapper]]

Otra opción:

[[+ wf.linktext]] - [[+ wf.description]] [[+ wf.wrapper]]

Ejemplos de

Primer nivel

[[! Wayfinder? & startId = `0` & level =` 1`
& rowTpl = `rowTpl`
& externalTpl = `externalTpl`
& hereClass = `activo`
& rowClass = `eNav_li`]]

Código de fragmento externoTpl

[[+ wf.wrapper]]

Código de fragmento RowTpl

[[+ wf.wrapper]]

Segundo nivel (en este ejemplo, los elementos del menú y del submenú estaban visualmente en el mismo nivel

[[! Wayfinder? & startId = `0` & level =` 2`
& rowTpl = `rowTplFooterMenu`
& externalTpl = `externalTplFooterMenu`
& innerTpl = `innerTplFooterMenu`
& innerRowTpl = `innerRowTplFooterMenu`
& hereClass = `active`]]

Código de fragmento externoTplFooterMenu

código de fragmento rowTplFooterMenu

• 
  
  [[+ wf.title]]
  
  

[[+ wf.wrapper]]

código de fragmento innerTplFooterMenu

[[+ wf.wrapper]]

código de fragmento innerRowTplFooterMenu

[[+ wf.title]]

Pero esto no es para nosotros;).

Haremos todo desde cero. ¿Por qué (yo) necesitamos esto, porque ya hay opciones listas para usar? Porque me gusta así. Porque creo que este enfoque es el más correcto. Porque, al poder desarrollar el nuestro, podemos entender fácilmente el código ajeno, cambiarlo, corregir errores o complementarlo con la funcionalidad necesaria en un caso particular. Y, al final, ¡hacer el tuyo a menudo es muy agradable!

La narración adicional asumirá que el lector tiene un conocimiento mínimo de programación PHP. En teoría, aquellas personas que no comprendan el código en absoluto podrán copiar el código y reproducir todos los pasos que se discutirán a continuación. Sin embargo, puede ser mejor para ellos usar fragmentos de código prefabricados a la Ditto, ya que brindan un montón de oportunidades para la configuración externa sin entrar en el código principal.

No quiero debatir qué es mejor para el usuario: tomar ready-made o desarrollar el suyo propio ... Tanto en eso como en otro caso, hay pros y contras. Para mí, personalmente, hay más ventajas en la segunda opción. Además, cada uno de los lectores decidirá por sí mismo.

Entonces, echemos un vistazo al nuestro nuevamente. Dado que hay bastantes partes de software diferentes en nuestro sitio, y necesita comenzar con algo, programaremos ...

Menu principal

Por el término "menú superior" me refiero a un conjunto de enlaces a páginas en la parte superior del sitio (ver imagen a continuación):

Describiré el primer ejemplo de creación de un fragmento con gran detalle, en el futuro me detendré principalmente en los detalles más esenciales.

Comparemos el árbol de nuestro sitio en el sistema de gestión, que creamos en el artículo anterior:

Como puede ver en la figura, cuatro documentos están resaltados en el árbol del sitio (a saber, "Blog", "Acerca de los autores", "Fotos" y "Comentarios"), que posteriormente crearán enlaces en el menú superior.

Permítame también recordarle que tenemos documentos ocultos de antemano que no queremos mostrar en el menú. Por ejemplo, en la configuración del documento con el nombre "Búsqueda en el sitio", se eliminó la casilla de verificación "Mostrar en el menú" y los dos documentos restantes, "Enlaces" y "Categorías", se ocultaron en el sitio, al eliminar la casilla de verificación. en la configuración del documento "Publicar" (la pestaña "Configuración de página" en la configuración del documento).

Así, en el artículo anterior, preparamos el menú superior en el sistema de control.

Ahora pasemos al tema de mostrar nuestras acciones directamente en el sitio.

La mayoría de los programas en el sitio son realizados por los llamados. "", es decir. piezas de código separadas (también pueden entenderse como funciones o subrutinas separadas) en PHP. Por lo tanto, para implementar la visualización del menú superior en MODx, también necesitamos crear un nuevo fragmento, programarlo y agregar una llamada a este fragmento en la plantilla en el lugar correcto.

Vayamos al sistema de gestión, abra la pestaña "Recursos" -> "Gestión de recursos" -> la pestaña "Fragmentos" y haga clic en el enlace "Nuevo fragmento". En el campo "Nombre del fragmento", ingrese "Menú superior" sin comillas y, por ahora, guarde un fragmento vacío sin código. Después de guardar, veremos el nombre de nuestro fragmento en la pestaña "Fragmentos".

Permítanme recordarles que en nuestra plantilla movimos el menú superior al fragmento "TOPMENU". Cambie a la pestaña "Fragmentos" y abra el fragmento "". En el contenido de este fragmento, veremos el siguiente código:

• Blog


• Sobre los autores


• Foto


• Realimentación

Este código es lo que crea nuestro menú. Comentemos y agreguemos una llamada al fragmento "TopMenu" en el fragmento:

[]

Aquí nuevamente tendremos que divagar un poco para aclarar el significado de esta construcción []. El hecho es que es con la ayuda de construcciones como [] o [! SnippetName!] Que podemos realizar llamadas a fragmentos de código en cualquier lugar de nuestras plantillas, fragmentos e incluso en cualquier página separada del sitio.

En este caso, la construcción [] denota una llamada en caché fragmento, es decir una llamada a una subrutina dinámica, cuyo resultado se calculará y ejecutará una vez, y luego de cargar la página donde se llama este fragmento, el resultado no se modificará, ya que la llamada repetida del fragmento ya no se produce. Por lo tanto, ahorramos los recursos de nuestro servidor web (y esto siempre es muy importante con mucho tráfico hacia el recurso).

Sin embargo, hay situaciones en las que necesita volver a ejecutar el código de fragmento todo el tiempo y no puede almacenar en caché los resultados. En tales casos, se utiliza la construcción [! SnippetName!], Que siempre forzará la ejecución del fragmento sin almacenamiento en caché. Por analogía, esta construcción se denomina llamada incacheable retazo.

Por lo tanto, guardemos el fragmento "TOPMENU" y actualice la página del sitio. Mmmm, curiosamente, el menú superior se ha ido. ¿Pero es realmente tan asombroso? Al comentar el código HTML del menú en el fragmento, ocultamos su visualización en el navegador (verifique esto mirando la fuente HTML de la página). Y nuestro fragmento de "TopMenu" no hace nada, ya que todavía no se le ha agregado nada. Solucionemos esta deficiencia :).

Regresemos a la pestaña "Fragmentos", abra el fragmento "TopMenu" creado e intentemos probar sus capacidades ... Paciencia, mis lectores avanzados, no todo el mundo está familiarizado con estos detalles.

Primero, escribamos el código más simple (código PHP normal):

echo "Probando ...";
?>

Antes de guardar, seleccione "Continuar editando", ya que tendremos que cambiar el contenido de nuestro fragmento más de una vez, y luego guardaremos el fragmento. Actualicemos la página del sitio y veamos en lugar del menú superior ... bueno, a decir verdad, a primera vista no veremos casi ningún cambio, excepto por el fondo azul ligeramente expandido del menú. Presione "CRTL + A" para seleccionar todo el texto en la página del sitio, y veremos que nuestro fragmento aún muestra el texto "Probando ..." en lugar del menú, solo el color del texto coincide con el color de fondo.

Cambiemos el código del fragmento a lo siguiente:

eco " Probando ...";
?>

Ahora podemos ver claramente que nuestro fragmento funciona e incluso (!) Muestra algo de texto. Bueno, esto está bien, pero no es suficiente para nuestra tarea, ya que debemos asegurarnos de que nuestro fragmento muestre los enlaces del sistema de control, y exactamente en el mismo código HTML que comentamos en el fragmento "TOPMENU".

Y de nuevo, una pequeña distracción ...

Todo el sistema de relaciones de documentos en MODx se construye de acuerdo con el principio: cada "documento principal" contiene de cero a muchos "documentos secundarios" ("principal" -> "secundarios").

Cada documento en la base de datos MODx tiene su propio identificador único "ID" - este es el número que vemos entre paréntesis en el árbol del sitio junto a cada uno de los documentos.

Por cierto, este identificador único tiene un solo significado: identifica de forma única un documento específico en el sistema de control. y nada más! Me enfoco específicamente en este hecho, ya que me he encontrado con repetidos intentos de cambiar estos identificadores para una variedad de propósitos ... Debe recordar de inmediato que esto es simplemente inútil, así que no intente cambiar estos números. No debe prestarles mucha atención, por lo general, estos números se usan simplemente para generar enlaces a ciertos documentos.

En la base de datos MODx, también se ha creado un campo "padre" especial para cada documento. El valor de este campo es un número que indica el identificador único del documento principal o, si el documento está en la raíz del árbol, cero. Por lo tanto, siempre es posible determinar sin ambigüedades qué documento es el padre de uno determinado.

Para ver de lo que acabamos de hablar, abra phpMyAdmin, seleccione su base de datos y busque la tabla (PREFIX) site_content, donde (PREFIX) es su prefijo que ingresó durante la instalación. Verá muchos campos que almacenan ciertos datos del documento, incluyendo "ID" - un identificador único, "padre" - el número del documento padre, "pagetitle" - el título de la página y otros.

Entonces, usando esta información sobre el principio de almacenar y vincular documentos en MODx, podemos entender cómo obtener los datos necesarios para mostrar los enlaces del menú superior: necesitamos encontrar en la base de datos todos los documentos que están en la raíz del árbol del sitio, es decir tener un valor de cero en el campo "principal".

Usando el lenguaje SQL, una consulta similar se describe algo como esto (puede intentar ingresar esta consulta en el campo de entrada SQL en phpMyAdmin, después de reemplazar "modx_" con su prefijo):

SELECCIONE *
DESDE `modx_site_content`
DONDE `padre` = 0;

Sin embargo, dicha solicitud nos devolverá absolutamente todos los documentos de la raíz del sitio, lo cual no es del todo correcto, según la tarea principal: mostrar enlaces solo a aquellos documentos que tienen:

• estado publicado (en la base de datos, el campo "publicado" es responsable de este elemento, donde valor = 1 significa que el documento ha sido publicado y valor = 0 - no publicado).
• no eliminado (el campo "eliminado", donde 1 se elimina y 0 no se elimina),
• y que tienen configurada la opción "Mostrar en el menú" (el campo "ocultarmenú", donde 1 - para ocultar y 0 - para mostrar en el menú).

Además, avanzando un poco, ordenaremos inmediatamente los documentos por el parámetro "Posición en el menú", que determinará la posición de cada enlace en nuestro menú.

Bueno, desde el punto de vista de SQL, esta no es una tarea difícil en absoluto y se resuelve así:

SELECCIONE *
DESDE `modx_site_content`
DONDE `publicado` = 1
AND `parent` = 0
Y `eliminado` = 0
Y `hidemenu` = 0
ORDEN POR ASC `menuindex`;

Teóricamente, todas las consultas SQL se pueden ejecutar en fragmentos directamente usando scripts PHP, conectando la base de datos cada vez y haciendo muchas otras operaciones de rutina, repitiéndolas una y otra vez ... Pero, debe estar de acuerdo, esto neutralizaría el significado de usar el marco. , que es sin duda nuestro sistema de control desde MODx, entre sus otras ventajas, proporciona un conjunto de herramientas de interfaz de programa listas para usar (API, interfaz de programación de aplicaciones). Las API son funciones de software que unifican y facilitan muchos procesos de procesamiento de datos.

Usemos una de las funciones API mencionadas "getDocumentChildren" en nuestro fragmento. La función "getDocumentChildren" recibe los siguientes datos como parámetros:

• $ id - número del documento principal,
• $ activo: seleccione solo documentos publicados o no publicados (1 o 0, respectivamente),
• $ eliminado: seleccione solo documentos eliminados o no eliminados (1 | 0),
• $ campos: campos que se seleccionan de la base de datos,
• $ donde hay condiciones especiales, es decir Cláusula WHERE en la consulta SQL,
• $ sort - el campo por el cual ordenar los resultados
• $ direction - dirección de clasificación, puede ser ASC o DESC, es decir ordenar de menor a mayor valor o viceversa
• $ limit - limitación de solicitud, es decir Cláusula LIMIT en consulta SQL

$ resultados = $ modx-> getDocumentChildren (
$ id = 0,
$ activo = 1,
$ eliminado = 0,
$ donde = "hidemenu = 0",
$ sort = "menuindex",
$ dir = "ASC",
$ límite
);

Impresión ("

Foreach ($ resultados como $ clave => $ valor) (
print_r ($ valor);
}

Impresión ("");
?>

Guarde el fragmento y actualice la página. Como resultado de ejecutar el fragmento "TopMenu" actualizado, verá una lista de matrices y sus valores ordenados por los valores del campo "menuindex" desde el valor más bajo hasta el más alto. Intente cambiar el parámetro $ dir = "ASC" a $ dir = "DESC"; como resultado, las matrices se reconstruirán y el documento con el valor más alto del campo "menuindex" se mostrará como el primer documento.

Probablemente esté claro para los programadores experimentados que el resultado obtenido ya brinda todo lo que necesita para construir un menú listo para usar con enlaces. Bueno, casi todo. En cualquier caso, continuaré: reescribiremos el código PHP para acercarnos lo más posible al resultado deseado.

$ resultados = $ modx-> getDocumentChildren (
$ id = 0,
$ activo = 1,
$ eliminado = 0,
"id, pagetitle, publicado, menuindex, eliminado, hidemenu, menutitle",
$ donde = "hidemenu = 0",
$ sort = "menuindex",
$ dir = "ASC",
$ límite
);

$ elementos = "";
$ salida = "";

Foreach ($ resultados como $ clave => $ valor) (
$ artículos. = "

". $ valor [" título de página "]."

\ n ";
}

Si ($ artículos! = "") (
$ salida = "

\ n ";
$ salida. = $ artículos;
$ salida. = "

\ n ";
}

Devolver $ salida;

No analizaremos el código en detalle, ya que este es el código PHP más común, nada más. Si alguien no entiende el significado de alguna construcción, pregunto en los comentarios, o mejor, a los foros de soporte correspondientes.

Guardemos el nuevo fragmento de código y actualice la página. Como resultado de ejecutar el código, veremos prácticamente lo que queríamos conseguir:

Aquellos. estos ya son enlaces generados automáticamente, cuya estructura repite completamente la estructura de los documentos en el árbol MODx. Para probar esto, intente crear algún documento de prueba en la raíz del sitio y actualice la página.

Sin embargo, esto no es todo. Muchos probablemente ya se han dado cuenta de que hay enlaces, pero no hay enlaces ... Paradox :). Quiero decir, se muestran los nombres de los documentos en el menú, pero los enlaces a ellos no funcionan. Esto es lógico, ya que mientras en el código de los enlaces se muestra "#" en lugar de las rutas reales.

Para resolver este problema, necesita conocer otra característica extremadamente útil de MODx: la dirección de cualquier página interna del sitio se puede obtener usando la siguiente construcción [~ id ~], donde id es el número único del documento requerido, es decir el mismo número indicado entre corchetes junto al nombre de cada documento en el árbol del sitio. Por lo tanto, al agregar tal construcción [~ 1 ~] en el contenido de la plantilla / fragmento / página,

• • índice: el alias del documento "Blog", si ingresamos "índice" como alias del documento, o
  • 1.html, si no ingresamos nada en el campo "Alias" del documento "Blog"
• si los enlaces amigables están deshabilitados, entonces veremos el texto index.php? id = 1

Reescribamos el fragmento con esta información:

$ resultados = $ modx-> getDocumentChildren (
$ id = 0,
$ activo = 1,
$ eliminado = 0,
"id, pagetitle, publicado, menuindex, eliminado, hidemenu, menutitle",
$ donde = "hidemenu = 0",
$ sort = "menuindex",
$ dir = "ASC",
$ límite
);

$ elementos = "";
$ salida = "";

Foreach ($ resultados como $ clave => $ valor) (
$ artículos. = "

". $ valor [" título de página "]."

\ n ";
}

Si ($ artículos! = "") (
$ salida = "

\ n ";
$ salida. = $ artículos;
$ salida. = "

\ n ";
}

Devolver $ salida;

Así que cambiamos # a [~ ". $ Value [" id "]." ~], Es decir de hecho, para cada documento de la matriz, su ID único se sustituye dentro de la construcción [~ id ~]. Como resultado, obtenemos un menú con enlaces de trabajo.

Casi hemos alcanzado el ideal ... Sin embargo, incluso ahora todavía hay un detalle que debe tenerse en cuenta: el diseñador determinó que el enlace activo debe resaltarse con un fondo blanco y, en consecuencia, el color del enlace debe cambiarse a naranja.

Para conseguirlo, volveremos a desvelar los secretos de MODx CMS :). Oculta en la API se encuentra la función $ modx-> documentIdentifier, que devuelve el valor del identificador único de la página actual. Lo necesitaremos para determinar la página activa y seleccionarla en el menú:

$ resultados = $ modx-> getDocumentChildren (
$ id = 0,
$ activo = 1,
$ eliminado = 0,
"id, pagetitle, publicado, menuindex, eliminado, hidemenu, menutitle",
$ donde = "hidemenu = 0",
$ sort = "menuindex",
$ dir = "ASC",
$ límite
);

$ cid = $ modx-> documentIdentifier;

$ elementos = "";
$ salida = "";

Foreach ($ resultados como $ clave => $ valor) (
if ($ valor ["id"] == $ cid) (
$ activo = "id = \" activo \ "";
}
demás (
$ activo = "";
}
$ artículos. = "
". $ valor [" título de página "]."
\ n ";
}

Si ($ artículos! = "") (
$ salida = "

\ n ";
$ salida. = $ artículos;
$ salida. = "

\ n ";
}

Devolver $ salida;

Bueno, ¿cómo funcionó? ¡Sucedió!

Pero no pensaste que todo había terminado, ¿verdad? Y con razón. Nos fijamos el listón más alto, queremos utilizar las capacidades máximas de MODx. Por lo tanto, hay un pequeño detalle más que nos perdimos.

Echemos un vistazo más de cerca a los nombres de los campos que solicitamos usando la función getDocumentChildren: "id, pagetitle, Published, menuindex, deleted, hidemenu, menutitle". Entre ellos hay un campo llamado "menutitle". Como sugiere el nombre, este campo puede almacenar título del menú... El sistema de control también tiene un campo de entrada "Elemento de menú". Este campo es opcional. Sin embargo, la lógica es que si se completa este campo, entonces debemos reemplazar el texto del enlace en el menú con el ingresado por el usuario. Bueno, hagámoslo así:

/********************************
Título: TopMenu
Propósito: mostrar el menú superior
Proyecto: Demosite MODx
********************************/

$ resultados = $ modx-> getDocumentChildren (
$ id = 0, // ID del documento principal
$ active = 1, // Seleccione solo documentos publicados
$ eliminado = 0, // Seleccione solo documentos no eliminados
"id, pagetitle, Published, menuindex, deleted, hidemenu, menutitle", // Seleccionar campos de la base de datos
$ where = "hidemenu = 0", // Seleccione solo aquellos documentos que necesitan ser publicados en el menú
$ sort = "menuindex", // Ordenar documentos por el campo menuindex
$ dir = "ASC", // Ordenar documentos en orden ascendente
$ limit = "" // No establecemos ninguna restricción (el parámetro LIMIT en la consulta SQL)
);

$ cid = $ modx-> documentIdentifier; // obtener el ID de la página actual

$ elementos = "";
$ salida = "";

Foreach ($ resultados como $ clave => $ valor) (
if ($ valor ["id"] == $ cid) (
$ activo = "id = \" activo \ "";
}
demás (
$ activo = "";
}
if ($ valor ["menutitle"]! = "") (
$ título = $ valor ["menutitle"];
}
demás (
$ título = $ valor ["título de página"];
}
$ artículos. = "
". $ título".
\ n "; // recopilar elementos del menú
}

// Si se encontró al menos un elemento de menú,
// crea el código HTML para el menú
if ($ artículos! = "") (
$ salida = "

\ n ";
$ salida. = $ artículos;
$ salida. = "

\ n ";
}

// Devuelve el resultado del fragmento
return $ salida;

Ahora intente ingresar algo de texto en el campo de entrada "Elemento de menú" de cualquier documento ... ¿Funciona todo? ¡Maravilloso!

PD: Quizás algunos lectores se sorprenderán de que al hacer clic en los enlaces de nuestro menú, el contenido de las páginas no cambia, aunque parece que, a juzgar por la ruta en la dirección del navegador, nos estamos moviendo a nuevas páginas. . Créame, esto es absolutamente normal, porque absolutamente todas las páginas utilizan actualmente la misma plantilla. En esta plantilla, de hecho, solo hemos hecho dinámico el menú superior hasta ahora, todos los demás detalles permanecen sin cambios. Definitivamente nos ocuparemos de esto más adelante, pero por ahora, que no cunda el pánico;).

Conclusión:

Entonces, un artículo más ha llegado a su conclusión lógica.

Los resultados del aprendizaje:

• Intentamos comprender el propósito de algunos de los campos de entrada para los documentos MODx y examinamos el almacenamiento de esta información en la base de datos;
• Descubrí nuevas construcciones especiales de MODx: [], [! SnippetName!], [~ Id ~];
• Aprendió sobre la disponibilidad de una API especial y usó algunas de las funciones de la API;
• ¡Y basándonos en este conocimiento, creamos nuestro nuevo fragmento en MODx!

Al enviar un sitio web listo para usar, las tarjetas de presentación del webmaster intentan automatizar todos los procesos tanto como sea posible para que el cliente, después de la entrega del proyecto, no los tire por nimiedades. Uno de los problemas más habituales es precisamente con la creación y edición de nuevos elementos de menú.

Por tanto, una de las principales tareas de un webmaster es crear un menú dinámico para que todas las acciones para editar la estructura del menú se puedan realizar desde el panel administrativo.

Esto se puede hacer usando herramientas especiales de MODx: fragmentos.

Retazo Es un código php que se ejecuta en la plantilla MODx y le permite mostrar información de la base de datos del CMS.

Los fragmentos se dividen en dos tipos:

• en caché
• no almacenable en caché.

Su diferencia está en el diseño de la llamada. Entonces, por ejemplo, si tenemos un fragmento con el nombre "SNIPNAME", entonces con una llamada no almacenada en caché, la estructura se verá así:

[! SNIPNAME!]

Con una versión en caché, se verá así:

[]

Aquí puede surgir la pregunta, ¿por qué hacer que el fragmento se pueda almacenar en caché? El caso es que al usar la caché, la estructura se guarda y no hay un acceso constante a la base de datos, lo que a su vez aumenta la velocidad de carga de las páginas y reduce la carga en el servidor. Pero a menudo, puede enfrentar el hecho de que después de ingresar al caché, el webmaster realiza algunas acciones, pero no se muestran en el sitio, para mostrarlas, primero debe borrar el caché desactualizado. Hablaré de esto un poco más tarde. Usaremos la opción de menú sin caché.

La segunda característica importante de los fragmentos es: Opciones extra, que se puede establecer directamente al llamar a esta construcción. El diagrama tiene este aspecto:

[! SnippetName? & parámetro1 = `valor de parámetro` & parámetro2 =` valor de parámetro`!]

Firmar "?" - le da al sistema una señal de que está seguido por parámetros que deben aplicarse al fragmento. Y los fragmentos en sí están separados por el signo "&", y los valores están entre comillas. Si pones las comillas incorrectas, nada funcionará.

¿Cómo se personaliza la visualización dinámica de la estructura del menú?

Para mostrar el menú en MODx, usaremos un fragmento:

[! Wayfinder!]

No podremos utilizarlo en su "forma pura", ya que esto requiere la presencia de materiales incrustados, y se mostrará solo en la página principal. Será correcto indicar el id del artículo del que vale la pena contar. Con este método, podemos crear muchos menús diferentes usando id para esto. En la práctica, será más claro.

Dado que ahora el punto principal es "Main" con el valor id = 1. Entonces la estructura debería verse así:

Con esta construcción, puede sacar el menú de los elementos secundarios. Pongamos esto en práctica.

Vamos al apartado "Elementos" - "Gestionar elementos" - Pestaña "Chunks". Seleccionamos el fragmento "HEADER" y encontramos en él el código que se encarga de mostrar el menú.

HOGAR

• hogar
• sobre nosotros
• servicios
• proyectos
• soluciones
• trabajos
• Blog
• contactos

Insertemos la construcción del fragmento anterior en lugar de este código:

[! Wayfinder? & startId = `1`!]

Como puede ver, el menú está conectado, la url cambia en la barra de direcciones, aunque la plantilla sigue siendo la misma, lo arreglaremos en las próximas lecciones.

Pero hay dos problemas:

1.) El elemento de menú activo no está resaltado.

2.) No hay un elemento de menú "Inicio".

Solucionemos estas deficiencias.

Conectamos el elemento de menú activo

De forma predeterminada, el fragmento de Wayfinder forma el elemento de menú activo con la clase "activa". Por lo tanto, no tenemos que agregar un script adicional, solo cambiamos la clase en el archivo css. Para hacer esto, vaya a la carpeta con nuestra plantilla - /assets/templates/retina/css/style.css. Tenga en cuenta que el nombre de carpeta de la carpeta de plantilla puede diferir para usted, todo depende del nombre que ingresó en las primeras lecciones. Abra este archivo y busque una línea con estilos para el elemento de menú activo. Tengo esta línea - 190, y aquí está el código en sí:

#navigation a.nav-btn (margin-bottom: 15px; text-decoration: none; padding: 0 36px 0 10px; line-height: 30px; display: block; background: url (images / navigation.png) repeat-x 0 0; altura: 30px; posición: relativa;)

Reemplaza la clase ".nav-btn" por "activo".

Conectamos "Inicio"

Y así, como comprenderá, hemos eliminado los elementos secundarios del elemento del menú "Inicio". Para abrir este elemento en sí, necesitamos que todo nuestro menú esté en el mismo nivel de anidación.

Primero, verificamos si el acceso a la carpeta raíz está abierto. Para ello, vaya a la sección "Herramientas" - "Configuración" - Pestaña "Usuarios". En él encontramos el parámetro - " Permitir el acceso a la carpeta raíz"Y establezca el valor en" Sí ".

Después de eso, seleccione el elemento, digamos "Servicios", vaya a la página para editarlo y haga clic en el icono de abajo, como se muestra en la captura de pantalla.

Después de hacer clic, debe seleccionar el elemento del menú principal en la columna de materiales de la izquierda, seleccionamos la carpeta del caballo. Vea la captura de pantalla a continuación.

Haga clic en él y guarde nuestro artículo. El material en sí debe moverse un nivel con el "Principal".

Esta acción debe realizarse con todos los subpárrafos. Debería tener la siguiente estructura.

Si actualizas la página de tu sitio ahora, tu menú desaparecerá. Esto se debe a que la identificación de la categoría principal ha cambiado. Modifiquémoslo. Para hacer esto, vaya a la sección "Elementos" - "Administrar elementos" - Pestaña "Trozos". Seleccione el fragmento "HEADER" y busque el código en él:

[! Wayfinder? & startId = `1`!]

Y cambia a:

Eso es todo, el menú está completamente listo y coincide con la plantilla.

Si te diste cuenta, puedes ver en la plantilla que en el pie de página tenemos un menú que repite exactamente los elementos de la opción que acabamos de crear. Por lo tanto, propongo corregir inmediatamente este bloqueo también. Para hacer esto, vaya a la sección "Elementos" - "Administrar elementos" - Pestaña "Fragmentos" seleccione el fragmento "PIE de página". En él encontramos el código responsable de mostrar el menú inferior, y en su lugar insertamos la construcción ya familiar.

[! Wayfinder? & startId = `0`!]

Esto es lo que debería obtener.

Eso es todo por hoy. Si tienes alguna duda escríbela en los comentarios, intentaré responderla. Hasta las próximas lecciones.

Saludos queridos lectores. En la última lección, llenamos un poco el sitio con contenido (), ahora es el momento de traer todo al menú para que los usuarios puedan navegar hasta ellos.

Crear dinámica menú en MODX usaremos un fragmento PdoMenu del paquete pdoTools... Consulte la documentación básica antes de comenzar.

Documentación de PdoMenu

Opciones

Parámetros de plantilla

Parámetros de clase CSS

Ejemplos oficiales

puedes leer la documentación oficial aquí. Ahora echemos un vistazo a las llamadas de menú más típicas.

Llamar a PdoMenu

Opción 1... En lugar de este menú estático llamar al fragmento de pdoMenu, para esto en el árbol de recursos, en la pestaña " Los elementos"En la sección de fragmentos, expanda la rama pdoTools, luego haga clic en pdoMenu haga clic con el botón izquierdo (no suelte el botón) y arrastre este fragmento al lugar donde desea llamar al menú, luego, en la ventana que se abre, complete los parámetros necesarios y haga clic en " Ahorrar«.

opcion 2... Simplemente escribimos la llamada manualmente.

Ejemplos típicos

Menú normal de un solo nivel

Por ejemplo, tenemos el menú más común, con el siguiente marcado html.

Obtuvimos el siguiente código con una llamada de menú:

• & parents = `0` - una lista de padres (en mi caso, no limito la selección, ya que de todos modos solo mostraré ciertas páginas);
• & level = `1` - nivel de anidamiento (en este caso no lo es);
• & resources = `2,3,4,5` - una lista de recursos que se mostrarán en el menú;
• & firstClass = `0` - clase para el primer elemento del menú (no ninguno);
• & lastClass = `0` - la clase del último elemento del menú (no cualquiera);
• & externalClass = `top-menu` - clase del envoltorio del menú (sustituido en ul);
• & hereClass = `current-menu-item` - clase para el elemento de menú activo (sustituido en li);
• & rowClass = `menu-item` - clase de una fila de menú (sustituida en li).

Menú de arranque personalizado de dos niveles

El código html estático se ve así:

Su código de salida será así:

Además, en la próxima lección daré un par de conclusiones más de menús desplegables, basados ​​en bootstrap (y esto es para aquellos que no entendieron el punto. Bueno, entonces lo haremos.

A primera vista todo parece complicado, pero eso no es así, lee la documentación con más detalle, haz preguntas en los comentarios, definitivamente te ayudaré.