Cómo mostrar todas las páginas secundarias de una página principal de WordPress

Cómo mostrar todas las páginas secundarias de una página principal de WordPress

Dividir el contenido relacionado en varias subpáginas asociadas es tanto un arte como una ciencia. Como webmaster de WordPress, es posible que tenga la tentación de poner una gran cantidad de contenido en una página singular, ¡pero debe resistirse a eso! Reducir el desorden aumentará la legibilidad de su página. Y distribuir su contenido en varias páginas es una de las formas más comunes de evitar una confusión. Sin embargo, debe dejar en claro a sus visitantes que la página original y las subpáginas posteriores están conectadas. Y asegúrese de que se pueda acceder fácilmente a esas subpáginas.

Puede abordar eso incluyendo un índice de todas las subpáginas conectadas en la página original. El índice ayudará a los usuarios del sitio web a ver rápidamente el contenido que buscan, así como a elegir entre el contenido o incluso a descubrir algo nuevo.

Crear subpáginas es bastante fácil ya que WordPress tiene una opción incorporada para ayudarlo a hacerlo. Funciona asignando una página para que sea la página principal de otra (conocida como child página). Sin embargo, el truco es insertar un índice de child páginas en la página principal. Entonces, en este artículo, veremos cómo mostrar un índice de child páginas que pertenecen a una página principal específica. Y le mostraremos cómo abordar este problema dividiéndolo en varios pasos más pequeños:

Puede mostrar un índice de todos child páginas adjuntas a una página específica de WordPress utilizando dos métodos diferentes. El primero implica el uso de un plugin conveniente y el segundo implica habilitar esta función mediante un código personalizado. Le mostraremos los pasos para ambos métodos. Sin embargo, primero debemos explicar cómo asignar una página principal a otra página de WordPress.

Asignar una página principal a otra página dentro de WordPress

Empiece por decidir qué página será la child página. Entonces ábrelo para editarlo y navegue a la sección Atributos de la página a la derecha. Si está utilizando el creador de páginas predeterminado de WordPress, Gutenberg, la sección se ubicará en la pestaña Documento. Entonces, localizar el Página principal opción, seleccione una página del menú desplegabley presione el Actualizar botón en la esquina superior derecha de la pantalla para actualizar la página.

Asignar una página principal

Esto establecerá la página que seleccionó en el menú desplegable como el padre de la página que estaba editando. La conexión exitosa también se puede ver en la lista de Todas las páginas. Las páginas secundarias se muestran debajo de su página principal correspondiente y están sangradas con un guión delante de su nombre.

También puede asignar páginas principales a páginas principales ya existentes. Esto crea child páginas de múltiples profundidades. los child El nivel de profundidad se indica mediante el número de guiones que preceden al título de la página.

Página principal del portafolio y páginas secundarias

Usando un plugin

Debido a la gran cantidad de plugins de WordPress para casi cualquier propósito, siempre debe intentar encontrar un plugin conveniente primero al agregar una nueva característica o funcionalidad. El plugin que usaremos en este artículo es el plugin CC Child Pages. Puede utilizar este plugin de dos formas después de instalarlo.

La primera forma requiere el uso de widgets. Inserte el widget CC Child Pages en el área de widgets que desee y entonces ajustar las opciones de widgets disponibles.

Encontrará el widget CC Child Pages cerca de la parte superior de la lista de la sección de Widgets disponibles. Cuando lo haya agregado, puede elegir qué opciones le serán útiles. Por ejemplo, cuando está marcada, la opción Mostrar título de página reemplazará el título estático del campo Título con el nombre de la página principal actual, por lo que child El índice de la página tendrá un título útil en lugar de solo decir Páginas secundarias. Puede elegir qué páginas no se mostrarán agregando ID de página en el Excluir opción.

Como referencia, una ID de página es un número que puede encontrar en el enlace permanente de una página, después de la parte con? Post = en ella. En nuestro caso, por ejemplo, el ID del Contáctenos la página es 1114.

ID de página

Además, marcando el Mostrar páginas hermanas mostrará páginas que tienen el mismo padre y están en el mismo child profundidad.

Widgets
Insertar widget de páginas secundarias

Aquí hay un ejemplo de cómo podría verse el contenido del widget en un sitio web creado con el tema Powerlift.

Vista previa de Widet de páginas secundarias CC

La segunda forma de usar el plugin CC Child Pages es insertar directamente el shortcode. Lo guiaremos a través de los pasos utilizando el creador de páginas de Gutenberg. Le recomendamos encarecidamente que estudie nuestro artículo sobre códigos cortos personalizados si no está seguro de cuáles son y de qué forma utilizarlos al insertarlos en su página. El artículo también cubre la inserción de un código corto personalizado dentro de su página si está utilizando Elementor o WPBakery como sus creadores de páginas de elección.

Para insertar el shortcode personalizado dentro de una página, haga clic en el signo + para agregar un bloque de Gutenberg y seleccione un Código corto bloquear. Entonces inserte el nombre del shortcode dentro de ella y presione el Actualizar botón. El nombre del shortcode es child_pages, por lo que puede simplemente insertar [child_pages]. Al hacerlo, todos los parámetros de función posibles se establecerán en su valor predeterminado, que se define dentro del archivo de plugin correspondiente. Pero también puede insertar sus argumentos para especificar algunos de los parámetros. Como la lista de posibles argumentos se establece como una matriz asociativa, debe insertar los argumentos en el siguiente formato: clave = 'valor'. Si realiza varias entradas, debe separarlas con un espacio en blanco.

Como ejemplo, hemos establecido lo siguiente:

[child_pages cols=’2’ depth=’0’]

Esto hace que nuestra lista de índice se muestre en 2 columnas (cols = '2') y presenta el padre y todo child páginas en una lista jerárquica y con sangría (profundidad = '0'). Si desea saber más sobre los argumentos disponibles y cómo incluirlos, le sugerimos que consulte la página oficial del plugin en detalle.

Código corto del plugin

Después de insertar el código abreviado de ejemplo, obtuvimos el siguiente resultado, que se muestra a continuación.

Vista previa de página de páginas secundarias CC

El inconveniente de este plugin es que tiene muy pocas opciones adicionales. Para fines de peinado, puede elegir si desea utilizar los estilos de plugin prefabricados o no. Eso se hace marcando el si o No casilla de verificación junto a la Enqueue Skin CSS en Configuración> Páginas secundarias.

Opciones de páginas secundarias CC

Para mejorar la estilización de tu child resultados de la página también puede incluir adicionales, hechos a medida, CSS en el CSS personalizado opción a continuación.

Opciones de páginas secundarias CC

Después de realizar cualquier cambio en la configuración, no olvide presionar el Opciones de actualización botón a continuación, para que se apliquen esos cambios.

Usando código personalizado

Otra forma posible de crear un índice de child páginas se realiza mediante el uso de código personalizado. El beneficio de este método es la libertad de personalización. Puede modificar la sección de índice del child páginas exactamente de acuerdo con sus necesidades sin depender de un plugin. Sin embargo, la creación de código personalizado es un método dirigido principalmente a usuarios de WordPress más experimentados.

Antes de profundizar en los pasos necesarios para este método, hay un par de sugerencias que nos gustaría hacer. En primer lugar, te sugerimos que repases tus conocimientos sobre el uso de FTP. En segundo lugar, es una buena política hacer una copia de seguridad de sus archivos de WordPress con anticipación, ya que el uso inadecuado del código puede dañar su sitio web.

Dicho esto, procedamos a la descripción de este método. Primero, necesitarías conectarse a su servidor usando sus credenciales de FTP y navegue hasta su directorio raíz de WordPress, a menudo llamado public_html.

FTP público HTML

Entonces, navegue hasta el directorio / wp-content / themes y haga clic en el directorio de su tema actual Para abrirlo.

Temas FTP

Encuentra el archivo functions.php dentro, haga clic derecho sobre ély Selecciona el Ver edición opción.

Funciones FTP

Abre el archivo usando su editor de texto preferido y inserte el código dado a continuación al final del archivo.

function qode_children_list() {
global $id;
$child_pages = wp_list_pages( array(
'title_li' => '',
'child_of' => $id,
'sort_column' => 'post_date',
'sort_order' => 'desc',
'echo' => 0
) );
if ( $child_pages){
$output="<ul>" . $child_pages . '</ul>';
}
else
$output="";
return $output;
}
add_shortcode( 'children_list', 'qode_children_list', 11 );
Código personalizado

Echemos un vistazo más de cerca al código incluido arriba.

Este código es un pequeño código abreviado personalizado llamado lista_niños. Muestra una lista desordenada de enlaces que llevan a los child páginas de una página en la que se utiliza el shortcode. Si esa página no tiene child páginas, el código no hará nada (el HTML de salida estaría vacío).

El código se basa completamente en la función wp_list_pages (). Esta función puede tomar muchos parámetros posibles aunque usamos muy pocos. Los notables son los dos que usamos para ordenar los enlaces apropiados. Más precisamente, los enlaces se ordenan en orden descendente siguiendo las fechas de publicación del child páginas. Por lo tanto, las entradas de la lista comenzarán desde la más reciente y descenderán hasta la más antigua.

Recomendamos encarecidamente consultar la documentación relacionada con la función wp_list_pages () para obtener más información sobre sus parámetros y su uso. Dicho esto, veamos cómo podemos usar este shortcode en nuestro sitio web.

Si desea agregar el código corto a su página, puede hacerlo usando Gutenberg como su creador de páginas. Simplemente presione el signo + para agregar un nuevo bloque, Selecciona el Código corto bloqueary insertar [children_list]. Finalmente, presione el Actualizar botón en la esquina superior derecha de la página. Si prefiere Elementor o WPBakery como creadores de páginas, puede encontrar los pasos necesarios para ellos en nuestro artículo sobre el uso de códigos cortos personalizados.

Código corto personalizado

Si usó el mismo código abreviado que le dimos como ejemplo dentro del contenido de su página, obtendrá el siguiente resultado:

Vista previa de código personalizado

También puede colocar el código corto en un widget de texto y mostrar el child índice de la página dentro de su área de widgets preferida. Este uso también se describe con más detalle en nuestro artículo sobre códigos cortos personalizados. Por ahora, puedes simplemente añadir [children_list] dentro del widget de texto y presione el Salvar botón. Incluso puede agregar un título para su child índice de la página, aunque hemos optado por no hacerlo en nuestro ejemplo.

Widget de texto de código personalizado

Así es como se veía el código corto en el tema de Powerlift después de insertarse en el área de la barra lateral.

Vista previa de código personalizado 2

Puede optar por estilizar aún más la apariencia de esta lista. Eso se puede hacer creando CSS personalizado. Si opta por hacer esto, le recomendamos que lo agregue en CSS adicional, que se encuentra en la sección Apariencia> Personalizar de su panel de administración.

Pensamientos finales

Mostrando todo child las páginas de una página principal específica tienen muchos usos. Facilitar la navegación a través de su sitio web y mejorar la experiencia del usuario, por nombrar algunos. Aunque mostrando el child Las páginas de una página principal de WordPress pueden parecer fáciles de lograr, se complica un poco por la falta de opciones integradas en WordPress. Sin embargo, si sigue los pasos que describimos en el artículo, puede administrar esto rápidamente y con un mínimo esfuerzo. Además, hemos hecho todo lo posible para ofrecer una explicación completa de ambos métodos. Ahora depende de usted elegir cuál prefiere utilizar.

Si quieres conocer otros artículos parecidos a Cómo mostrar todas las páginas secundarias de una página principal de WordPress puedes visitar la categoría Tutoriales.

/* */ Subir

Este sitio web utiliza cookies para ofrecerle una mejor experiencia de navegación, si continua en navegando consideramos que acepta su uso.