Algunas plantillas de WordPress son bastante estrechas en el menú lateral, la llamada barra lateral, o, por el contrario, estrechas en la sección de artículos y, naturalmente, algunos webmasters necesitan ampliar ciertos límites, por ejemplo, para acomodar banners. En este artículo te diré cómo cambiar el tamaño del encabezado, plantilla, sección del artículo o menú lateral.
Por qué es posible que necesites cambiar el tamaño de la plantilla.
Es posible que desees cambiar el tamaño de la plantilla desde el principio, tan pronto como la instales, o después de haber escrito varios artículos y las primeras docenas de visitantes hayan comenzado a aparecer. Por ejemplo, necesitaba ampliar la plantilla después de querer intentar ganar los primeros centavos en publicidad de mi trabajo: un blog. Para estos efectos se eligió el sistema pancarta publicitaria de AdSense de Google. Pero para ganar al menos dos centavos desafortunados, es necesario tener en cuenta dos parámetros:
- Para que alguien pueda hacer clic en un anuncio, los banners que emitirá el sistema deben estar en determinados lugares. En Internet escriben que este es el control deslizante izquierdo, colocamos un banner cuadrado allí y tres veces dentro del artículo. En la parte superior, en el centro, después de un poco de rumbo y al final. Este arreglo será ideal para que las personas hagan clic en el banner. Por supuesto, hay otras opciones, por ejemplo en las imágenes, pero no las consideraremos en el marco de este artículo.
- Google proporciona banners de determinados tamaños.
aquellos. Necesitamos combinar el primer y segundo punto, es decir, asegurarnos de que los banners de Google o Yandex se coloquen en los lugares designados, en la barra lateral izquierda y en los artículos. Como mi plantilla era demasiado estrecha para estos fines y no tiene sentido colgar carteles pequeños porque nadie hará clic en ellos, solo queda una cosa por hacer: expandir el menú lateral y la sección de artículos.
Cómo ampliar una plantilla horizontalmente parte 1, entiende los números
Para comprender cuánto necesitamos aumentar el ancho de tal o cual elemento, no necesitamos estimar de un vistazo "un centímetro aquí es suficiente y medio centímetro allá", sino averiguar estos números exactamente, en píxeles. Casi cualquier navegador nos ayudará con esto, por ejemplo:
- Safari
- fuegofox
- Google Chrome
Personalmente, mostraré Safari como ejemplo y usted utilizará cualquier navegador que le resulte conveniente. Las diferencias sólo deberían estar en un botón.
Entonces, la base: el tamaño de nuestro sitio consta de 4 elementos, el tamaño de la plantilla en sí, el tamaño de la página, el tamaño del bloque de artículos y el bloque de menú de la izquierda. Aumentaremos todo uno a uno, no te preocupes, no da miedo.
Para cambiar el ancho del menú de la izquierda.
En este caso, puedes cambiar tanto los píxeles, como hicimos en los pasos 3 a 5, como el porcentaje en la página. Para hacer esto, simplemente cambie el parámetro en lugar de los píxeles.
Estos valores significan cuánto por ciento del ancho puede ocupar uno u otro elemento. Lo principal es que la barra lateral y el artículo ocupan el 100% en total, y no más, de lo contrario todo flotará en la página.
Eso es todo. Ahora ya sabemos qué valores debemos cambiar para que todo encaje. Todo lo que queda es ingresar los datos necesarios en el archivo de estilo.
Cómo aumentar la plantilla horizontalmente parte 2, cambiar el ancho
Una vez que entendamos los números y los escribamos en algún lugar de una hoja de papel, cambiémoslos para todos, y no solo para nosotros. Para hacer esto:
- Inicie sesión vía FTP en el sitio
- Busque y copie el archivo /wp-content/themes/Your theme/style.css a su computadora
- Haga una copia de seguridad de este archivo, es decir. cópielo a su carpeta de documentos. Para que queden dos copias del archivo en el ordenador, una en la que trabajaremos y la segunda que no tocaremos. El segundo sirve por si cambiamos algo mal y nos olvidamos de qué.
- Abra el archivo en un editor conveniente. Ahora nos enfrentamos a una tarea bastante sencilla de cambiar los valores antiguos por otros nuevos. Hay dos maneras, la primera es fácil y la segunda es difícil. Primero, encontramos el valor anterior buscando y escribimos uno nuevo en su lugar. La segunda forma es buscar el nombre de los estilos, buscar el ancho dentro de los estilos y cambiar el valor.
Personalmente, elegí el primer método, sencillo, ya que permite realizar cambios en tan solo un par de segundos. Entonces, estamos buscando el valor 980. Una búsqueda en el archivo arrojó solo dos parámetros, que necesito cambiar.
El primero es responsable del ancho de todo el sitio:
| 1
2
3
4
5
6
7
8
| #page (altura mínima: 100 px; claro: ambos; ancho: 96%; relleno: 0; relleno superior: 24 px; ancho máximo: 980 px; desbordamiento: oculto; |
#page (altura mínima: 100 px; claro: ambos; ancho: 96%; relleno: 0; relleno superior: 24 px; ancho máximo: 980 px; desbordamiento: oculto;
El segundo es para el ancho de dos elementos, la lista de artículos y el menú de la izquierda:
| 1
2
3
4
5
6
7
8
9
10
11
| . contenedor principal (ancho: 980px; margen: 0 automático; desbordamiento: oculto; relleno: 0; fondo: #fff; posición: relativa; - webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; - sombra de caja de moz: 0px 0px 10px rgba (50, 50, 50, 0.17); |
Contenedor principal (ancho: 980px; margen: 0 automático; desbordamiento: oculto; relleno: 0; fondo: #fff; posición: relativa; -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; -moz-box-sombra: 0px 0px 10px rgba(50, 50, 50, 0.17);
Lo único que tenemos que hacer es cambiar los valores de 980 a 1080 y volver a cargarlo.
Eso es todo, pero si aún tienes alguna duda, escribe en los comentarios o envíame un correo electrónico, estaré encantado de ayudarte.
¿Quieres crear una página de ancho completo en WordPress?
Entonces volvamos a por qué estamos aquí.
Método 1: usar la plantilla de ancho incorporada en un tema de WordPress
Se recomienda este método si su tema de WordPress ya viene con una plantilla de página de ancho completo. Si no tiene uno, consulte la siguiente opción y obtenga uno.
Primero, debes editar la página o crear una nueva visitando " Páginas>Agregar Nueva pagina
En la ventana de edición de página, seleccione Ancho completo como plantilla debajo de la casilla de verificación de atributos de página.
Después de elegir un modelo Ancho completo Debes registrar tu página. Puede continuar personalizando la página para agregar más contenido o hacer clic en el botón de vista previa para verla en acción.
Si no tiene la opción "Ancho completo" - "plantilla de ancho completo" - en la pantalla de edición de su página, significa que su tema de WordPress no tiene esa página.
Pero no te preocupes, te mostraremos lo fácil que es crear una página de tamaño completo sin cambiar temas de WordPress.
Método 2: Cómo crear una plantilla de página de ancho completo
Este método requiere que edites los archivos de temas de WordPress que estás utilizando y, para los básicos comprensión de PHP, CSS y HTML.
Por cierto, también te invitamos a consultar con
Primero necesitas abrir editor de texto, como el Bloc de notas, y pegue el siguiente código en un archivo vacío:
Este código simplemente especifica el nombre de la plantilla del archivo y le pide a WordPress que recupere la plantilla del encabezado.
Entonces necesitarás la parte del contenido del código. Conéctese a su sitio mediante un cliente FTP ( o gestor de archivos en el panel) luego ve a /wp-contents/themes/tu-directorio-de-temas/ .
Entonces deberías encontrar un archivo llamado " página.php" Este es el archivo de plantilla de página predeterminado para su tema.
Copia todo después de la función " obtener_encabezado() Y pégalo en el archivo. Ancho completo.php Tú creaste esto en tu computadora.
Ahora necesitas mirar el contenido del archivo "full-width.php" y eliminar esta línea de código:
Esta línea simplemente restaura la barra lateral y la muestra en su tema de WordPress. Al eliminar esto, su tema no mostrará la barra lateral cuando use la plantilla. Ancho completo.
Es posible que veas que esta línea aparece varias veces en tu tema de WordPress. Si su tema de WordPress tiene varios, verá que se hace referencia a cada barra lateral una vez en el código. Debes decidir qué barras laterales quieres conservar.
Tu sitio web se carga lentamente, descubre
Si su tema no muestra barras laterales en su página, es posible que no encuentre este código en su archivo.
Así es como nuestro código full-width.php se encarga de realizar cambios. Su código puede variar ligeramente dependiendo de su tema.
Entonces necesitas descargar el archivo. Ancho completo.php En su carpeta de temas de WordPress usando .
Ha creado y cargado con éxito una plantilla de página personalizada de ancho completo para su tema. El siguiente paso es utilizar esta plantilla para crear una página de tamaño completo.
Vaya a su panel y edite o cree una nueva página.
En la pantalla de edición de página, busque la casilla de verificación de atributos de página y haga clic en el menú desplegable debajo de la opción Modelo.
Podrás ver tu modelo. Continúe, selecciónelo y guarde o actualice la página.
Ahora puede visitar su sitio web y verá que las barras laterales han desaparecido y su página aparece como una sola columna. Puede que aún no esté completo, pero ahora estás listo para distribuirlo de otra manera.
Haga que su sitio sea popular descubriendo
Deberá utilizar la herramienta Inspeccionar para descubrir las clases de CSS que utiliza su tema para definir el área de contenido.
Luego puedes ajustar su ancho al 100% usando CSS. Usamos el siguiente código CSS:
.str-template zona de ancho completo.content (ancho: 100%; margen: 0px; borde: 0px; relleno: 0px; ) .str-template ancho completo.Output (margen: 0px; )
Así sería Twenty Seventeen.
Eso es todo por este tutorial, espero que te permita crear páginas de tamaño completo.
Los métodos anteriores son gratuitos para aquellos que pueden permitírselo y desean crear rápidamente diseños de ancho completo o de ancho completo.
Descubra también algunos complementos premium de WordPress
Puede utilizar otros complementos de WordPress para darle un aspecto moderno y optimizar la gestión de su blog o sitio web.
Le ofrecemos varios complementos premium de WordPress que lo ayudarán a hacer esto.
1. Constructor Divi
Divi Builder es un creador de páginas de alta calidad y altamente calificado Temas elegantes Aunque se usa comúnmente como parte del tema Divi de WordPress, Divi Builder también es un complemento independiente que se puede usar en otros temas de WordPress.
Divi Builder le permite editar su contenido utilizando una interfaz visual frontal así como una interfaz del lado del servidor, aunque la mayoría de los usuarios prefieren la interfaz anterior.
Básicamente, en lugar de barras laterales, todo está en ventanas emergentes y botones flotantes. Le brinda acceso a 316 plantillas predefinidas distribuidas en 40 paquetes de presentación diferentes y también le permite guardar sus propios diseños como plantillas.
Te invitamos a abrir
Una de las características de Divi siempre ha sido el control sobre los estilos que te ofrece. Con tres pestañas diferentes, puede configurar varias configuraciones, incluidos controles adaptativos, espaciado personalizado y más.
Incluso puedes agregar CSS personalizado porque su editor CSS integra validación básica y autocompletar.Una de las críticas a Divi Builder siempre ha sido que se basa en . Esto significa que si lo desactivas una vez, quedarás con un montón de códigos cortos en tu contenido. Aunque es un poco frustrante, ahora hay menos problemas con complementos como Shortcode Cleaner.
2. constructor
No sorprende que Themify Builder sea una oferta del equipo de Themify. Lo integra en muchos de sus temas de WordPress para brindar a los clientes opciones simples ajustes. Pero también puedes comprarlo como complemento independiente y usarlo con cualquier tema de WordPress.
Al igual que Divi Builder y WPBakery Page Builder, Themify Builder le permite crear diseños en el frontend o backend.Otra cosa buena es que este complemento le permite personalizar sus puntos de interrupción responsivos (pero solo a nivel de todo el sitio).
Descubre cómo crear una tienda online y vende fácilmente tus productos online
Una característica interesante de Themify Builder es que aún te permite usar el editor estándar de WordPress, mientras que otros creadores de páginas te obligan a usar la interfaz de Page Builder para todo.
3. faquir
Lanzado originalmente en 2016, el complemento WordPress Elementor es uno de los desarrolladores más jóvenes de esta lista. A pesar del lanzamiento tardío, Elementor rápidamente acumuló más instalaciones activas 1.000.000 en WordPress.org, lo que lo convierte en uno de los creadores de WordPress más populares.
Si tienes alguna sugerencia o comentario déjalo en nuestra sección
A menudo sucede que el tema que te gusta tiene un área estrecha para las entradas y su configuración no permite cambiar el ancho. En este caso, se puede aumentar con conocimientos mínimos. HTML Y CSS. Por ejemplo, utilizamos el popular tema gratuito Patagonia. Puedes expandir tu tema usando un excelente complemento. Firefox— chinche de fuego. Primero necesitas instalarlo descargándolo desde aquí. Entonces enciéndelo complemento, como se muestra en la imagen - Pestaña Herramientas — desarrollo web — chinche de fuego — abrir Firebug:
Después de eso, en la parte inferior de la pantalla, debe mover el cursor y hacer clic con el mouse para seleccionar varios elementos. En este caso, en el lado derecho, se mostrará estilos CSS
, y en el área de la página se resaltará una u otra área: la principal, barra lateral, encabezamiento. Ahora estamos interesados en el área principal en la que terminaremos cuando “ingremos” la etiqueta.
. Un fragmento del archivo se mostrará en el lado derecho.
estilo.css. Y aquí puedes ver que el ancho del área principal es de 580 píxeles. Y esto no es suficiente para nuestras necesidades.
Por ejemplo, aumentar el anchoárea principal de 550 píxeles a 620. Para hacer esto, debe realizar cambios en la línea. ancho: 550px archivo estilo.css. Si el tema ya está instalado, puede editar este archivo directamente desde el panel de administración; de lo contrario, deberá descomprimir el archivo con el tema y realizar cambios en el archivo usando el editor. En nuestro caso, el tema está instalado, así que vaya a panel de administración— Apariencia
— Editor— abra el archivo style.css, busque el ancho de línea: 550px y cambie el valor del ancho de 550px a 620px. Hacer clic Actualizar archivo.
Vamos al sitio y vemos que el área de publicaciones se ha ampliado, pero en algunos lugares se ha superpuesto a la columna de la derecha. En este caso, necesitamos reducir proporcionalmente esta área. Para esto también usaremos Complemento Firebug, como en el caso anterior. Encontrar la etiqueta
