{"id":7690,"date":"2015-03-14T21:49:44","date_gmt":"2015-03-14T20:49:44","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=7690"},"modified":"2015-03-14T22:14:43","modified_gmt":"2015-03-14T21:14:43","slug":"creacion-de-una-pagina-wordpress-personalizada-programacion-manual","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/creacion-de-una-pagina-wordpress-personalizada-programacion-manual\/","title":{"rendered":"Creaci\u00f3n de una p\u00e1gina para WordPress personalizada. Programaci\u00f3n a medida."},"content":{"rendered":"

Cuando creamos un website con el CMS WordPress<\/strong>, tenemos la posibilidad de crear p\u00e1ginas a medida. P\u00e1ginas que contienen nuestro propio c\u00f3digo HTML o php para conectar con bases de datos, crear diferentes estructuras, dise\u00f1ar elementos a medida.<\/p>\n

Si usamos una plantilla, disponemos de diversos tipos tipos de p\u00e1ginas ya dise\u00f1adas, pero puede ser necesario crear nuestros nuevos tipos de dise\u00f1o.<\/p>\n

Este truco solamente es v\u00e1lido para las p\u00e1ginas, <\/strong>pero no para las entradas o posts. He buscado por Internet pero no encontr\u00e9 nada y decid\u00ed a crearlo a mano.<\/p>\n

Veamos c\u00f3mo, os dejo el ejemplo …
\n<\/p>\n

Para ello, sit\u00faate sobre nueva p\u00e1gina<\/strong>. En la parte de la derecha<\/strong> puedes seleccionar una plantilla<\/strong>.<\/p>\n

Para crear una plantilla, dir\u00edgete a la carpeta donde se encuentre el tema. Crea un archivo con extension php con el nombre que desees.
\nPor ejemplo: mi-pagina-a-medida.php<\/strong><\/p>\n

Edita la p\u00e1gina con un editor (recomiendo Sublime Text – ver entrada editores<\/a>).<\/p>\n

Os dejo el siguiente c\u00f3digo del archivo:<\/p>\n

<?php\r\n\/* Explicaci\u00f3n de una p\u00e1gina personalizada en WordPress\r\nOscar de la cuesta\r\nwww.palentino.es\r\nTemplate Name: Mi pagina a medida \r\n*\/\r\n?>\r\n\r\n<?php\r\nget_header();\r\n?>\r\n\r\n<div class=\"container\">\r\n\r\n<div class=\"row\">\r\n \r\n<?php\r\nif ( have_posts() ) while ( have_posts() )\r\n{\r\n\t?>\r\n\t <div class=\"post_container\" style=\"float:left;position:relative;width:625px;\">\r\n     \r\n     Esto se encuentra dentro de la pagina. Inserta texto, c\u00f3digo, lo que desees.\r\n             \r\n\t\t   <?php \r\n\t\t\t\tthe_post(); \/\/muestra el post y el contenido \r\n\t\t\t\tthe_content();\r\n}\r\n\t?>\r\n \t<\/div>\r\n    <div class=\"widget-container\" style=\"float:left;position:relative;width:331px;\">\r\n\t      <?php \r\n\t\t  \t\tget_sidebar(); ?> \/\/ Muestra el sidebar\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<?php \/\/Muestra el pie\r\nget_footer();\r\n?>\r\n\r\n?><\/pre>\n
Observa como existe en la parte superior un campo llamado template name:<\/strong> buscador de passwords<\/p>\n
IMPORTANTE: El nombre que sit\u00faes aqu\u00ed, es el que ver\u00e1s en la parte derecha, cuando a\u00f1adas una nueva p\u00e1gina.<\/strong><\/span><\/p>\n
El ejemplo, permite realizar 2 cosas interesantes.<\/p>\n
Primero es un ejemplo de p\u00e1gina que emplea responsive (container, row,etc), por otro lado permite mostrar los 2 contenidos (interno y el agregado dentro del editor de la p\u00e1gina).<\/p>\n
El que nosotros deseemos para la pagina desde dentro de la plantilla, y en la parte inferior mediante las funciones the_post, the_content<\/strong>, contenido de la pagina que se inserte desde el editor WYSIWYG<\/strong>.<\/p>\n
Observa que he dejado los estilos dentro de la pagina, pero podr\u00edan sacarse fuera a style.css sin problemas<\/strong>.<\/p>\n
Recuerda, es una forma sencilla de crear una p\u00e1gina a medida, \u00a0en este caso responsive, donde podremos emplear 2 tipos de contenidos dentro. \u00a0Adem\u00e1s la p\u00e1gina a medida emplea el sidebar.
\nSalu2.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Cuando creamos un website con el CMS WordPress, tenemos la posibilidad de crear p\u00e1ginas a medida. P\u00e1ginas que contienen nuestro propio c\u00f3digo HTML o php para conectar con bases de datos, crear diferentes estructuras, dise\u00f1ar elementos a medida. Si usamos una plantilla, disponemos de diversos tipos tipos de p\u00e1ginas ya dise\u00f1adas, pero puede ser necesario crear nuestros nuevos tipos de dise\u00f1o. Este truco solamente es v\u00e1lido para las p\u00e1ginas, pero no para las entradas o posts. He buscado por Internet pero no encontr\u00e9 nada y decid\u00ed a crearlo a mano. Veamos c\u00f3mo, os dejo el ejemplo …<\/p>\n","protected":false},"author":1,"featured_media":4681,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[617,664],"class_list":["post-7690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-template","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/comments?post=7690"}],"version-history":[{"count":8,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7690\/revisions"}],"predecessor-version":[{"id":7699,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/7690\/revisions\/7699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/4681"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=7690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=7690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=7690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}