{"id":8517,"date":"2016-01-22T23:10:21","date_gmt":"2016-01-22T22:10:21","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=8517"},"modified":"2016-01-22T23:30:55","modified_gmt":"2016-01-22T22:30:55","slug":"creacion-y-visualizacion-de-elementos-personalizados-en-wordpress-mediante-types-and-views","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/creacion-y-visualizacion-de-elementos-personalizados-en-wordpress-mediante-types-and-views\/","title":{"rendered":"Creaci\u00f3n y visualizaci\u00f3n de elementos personalizados en WordPress mediante Types and Views."},"content":{"rendered":"

El dise\u00f1o de p\u00e1ginas web, ha cambiado y mucho<\/strong> durante esta \u00faltima d\u00e9cada.<\/p>\n

Lejos quedan los tiempos en los que todo el mundo dise\u00f1aba webs con un mero editor de texto. Se trabajaba creando desde cero los cimientos y s\u00f3lo se necesitaban conocimientos HTML para\u00a0\u201cprogramar\u201d. Los Dise\u00f1os eran pr\u00e1cticamente HTML, con ausencia de CSS.<\/p>\n

Llegaron las herramientas gr\u00e1ficas de las cuales Frontpage y Dreamweaver<\/strong> fueron exponentes y \u201cfacilitaron\u201d la creaci\u00f3n de p\u00e1ginas, mediante men\u00fas, extensiones, etc \u00a0de una forma m\u00e1s visual. El inconveniente era que ensuciaba el c\u00f3digo generado, y se perd\u00eda el control del sitio.<\/p>\n

Posteriormente mediante la inclusi\u00f3n de herramientas totalmente visuales se pod\u00eda construir webs. El poder del CSS se perfecciona y surgen nuevas versiones del lenguaje HTML.<\/strong><\/p>\n

La llegada de CMS<\/strong> como Joobla, WordPress, Drupal, Typo3, \u2026 empezaron a reemplazar los dise\u00f1os sin herramientas backend ni contenidos din\u00e1micos. \u00a0Entre ellos destac\u00f3 WordPress, de hecho, cop\u00f3 el mercado, siendo 1 de cada 4 p\u00e1ginas mostradas en Internet desarrolladas con este potente CMS. \u00bf Malos tiempos para los programadores?<\/p>\n

<\/p>\n

\"html-4-food\"<\/a>El desarrollo sobre wordpress.org<\/a><\/strong> puede ser de 2 tipos, a mano<\/strong> o from scratch,<\/strong> mediante la creaci\u00f3n de elementos de plantilla desde cero o mediante el empleo de templates<\/strong> de terceros, templates profesionales. El desarrollo mediante templates acelera el proceso. Pero puede que en determinadas circunstancias necesitemos adaptar la web.<\/p>\n

Vemos que con el tiempo se ha ido facilitando del desarrollo de webs.<\/p>\n

Actualmente wordpress admite 3 tipos de entradas en una instalaci\u00f3n inicial<\/strong>.<\/p>\n

Las entradas o post<\/strong>, \u00a0las p\u00e1ginas<\/strong> y los elementos multimedia<\/strong>. Como posibles tipos de contenido.<\/p>\n

Pero puede que necesitemos emplear otro tipo de contenido al margen de los 2 ofrecidos. Y aunque podemos insertar clasificaciones dentro de cada tipo de pagina o post que los diferencien, nos falta algo m\u00e1s. Es lo que se denominan taxonom\u00edas, o la clasificaci\u00f3n de entradas en diversos tipos.<\/p>\n

Por ejemplo, podemos disponer dentro del backend un nuevo tipo en contenido, para insertar en vez de p\u00e1ginas o entradas, tipos de coches.<\/p>\n

Esto se puede realizar mediante programaci\u00f3n, pero requiere conocimientos elevados de las particularidades e interioridades de wordpress.<\/p>\n

Es por ello que os voy a hablar de 2 plugins que son bastante potentes, de la misma empresa y nos permiten crear tipos de contenidos determinados, y su posible representaci\u00f3n. Pero lo m\u00e1s importante es sin necesidad de saber programar. Aunque uno de ellos es de pago, podr\u00eda acelerar nuestros trabajos, y sacar rentabilidad de ellos.<\/p>\n

En la anterior entrada os habl\u00e9 de como montar un servidor Apache, con soporte PHP y MySQL en localhost sobre Windows 10 mediante WampServer<\/a><\/strong>, y lo he empleado para instalar la herramienta y mostraros pantallas de WordPress con el plugin Types.<\/p>\n

\"Types-plugin\"<\/a><\/p>\n

 <\/p>\n

Sigamos…<\/p>\n

El primer plugin Types es\u00a0gratuito, <\/strong>de la empresa OnTheGoSystems<\/a>. Adem\u00e1s de este plugin son conocidos por crear otros\u00a0para soporte multilenguaje\u00a0<\/strong>sobre WP.<\/p>\n

Types<\/strong>: https:\/\/wp-types.com\/home\/types-manage-post-types-taxonomy-and-custom-fields\/<\/a><\/p>\n

Nos permite crear los contenidos y las taxonom\u00edas.<\/p>\n

Views<\/strong>: https:\/\/wp-types.com\/home\/views-create-elegant-displays-for-your-content\/<\/a><\/p>\n

El segundo es de pago, permite personalizar contenidos creados con Types<\/strong>. Su coste son 79$<\/strong> para un numero de sitios ilimitados. Soporte 1 a\u00f1o. Aunque si queremos mas potencia podremos instalar el Toolset<\/strong>.<\/p>\n

Os dejo el enlace de diferentes versiones de Views:<\/p>\n

https:\/\/wp-types.com\/buy\/views\/<\/a><\/p>\n

Comentar\u00e9 algo sobre el concepto de taxonom\u00eda<\/strong>.<\/p>\n

Una taxonom\u00eda es un t\u00e9rmino generalmente desconocido, pero que en l\u00edneas generales, nos permite agrupar cosas.<\/p>\n

Por ejemplo, si creamos un tipo de contenido coches con types, luego podremos crear clasificaciones o taxonom\u00edas de \u00e9l.<\/p>\n

WordPress tiene 3 taxonomias predeterminadas.<\/strong>
\nLas categor\u00edas<\/strong>, que permite agrupar entradas, y asignarlas a varias categor\u00edas. Estas se pueden ver con las URLS tipo category\/nombre_categoria<\/strong><\/p>\n

Las etiquetas<\/strong>. Cuando creamos una entrada, podemos asignarle etiquetas, que se muestran con tag\/nombre_etiqueta.<\/p>\n

Y los enlaces<\/strong> o links, para categorizarlos. Son convenientes para definir grupos de enlaces a mostrar en las barras laterales o el pie de sitio.<\/p>\n

Estas taxonom\u00edas\u00a0se puede crear mediante programaci\u00f3n desde la versi\u00f3n 2.3. Para registrar taxonom\u00edas se usa la funci\u00f3n register_taxonomy()<\/strong><\/p>\n

Por ejemplo<\/strong><\/p>\n

 <\/p>\n

function gente_init() {\r\n\r\n\u00a0 \/\/ crea una nueva taxonomia\r\n\r\n\u00a0 register_taxonomy(\r\n\r\n\u00a0\u00a0\u00a0 'gente',\r\n\r\n\u00a0\u00a0\u00a0 'post',\r\n\r\n\u00a0\u00a0\u00a0 array(\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 'label' => __('Gente'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 'sort' => true,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 'args' => array('orderby' => 'term_order'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 'rewrite' => array('slug' => 'persona'),\r\n\r\n\u00a0\u00a0\u00a0 )\r\n\r\n\u00a0 );\r\n\r\n}\r\n\r\nadd_action( 'init', 'gente_init' );<\/pre>\n
 <\/p>\n
Aqu\u00ed, la taxonom\u00eda \u00abgente\u00bb es definida. Se determina que trabajar\u00e1 con posts, y se define un slug (o ruta url) de reescritura para que la URL sea \/persona\/ en vez de \/gente\/.<\/p>\n
\u00a0<\/strong>Un poco de Types<\/strong><\/p>\n
Primero creamos un nuevo tipo de entrada.<\/p>\n
Despu\u00e9s le indicamos que campos son los que va a almacenar. De esta forma cada vez que creemos un coche a modo registro, indicarle sus caracter\u00edsticas. Podemos insertar campos gen\u00e9ricos o definir nosotros el tipo de campo, como puede ser texto, tiradores, im\u00e1genes, etc.<\/p>\n
Podemos crear taxonom\u00edas diversas. Editando el tipo de entrada, asignamos esas nuevas taxonom\u00edas.<\/p>\n
La idea es por ejemplo crear el tipo coche, crear diferentes taxonom\u00edas o marcas, y luego campos personalizados que son empleados por los coches.<\/p>\n
Por ejemplo, creamos 2 taxonomias de coches, Seat y Renault, cuando definimos tipo de entrada coche, decimos que taxonom\u00edas va a emplear. En este caso las 2. Despu\u00e9s una vez insertado un coche, por ejemplo laguna, podremos agregar texto a modo de etiqueta para ese coche, ejemplo, turismo, de tal forma que podremos tener 2 formas de verlo. Desde la categor\u00eda coches, laguna o desde coches, turismo. La primera se apoya en el tipo y la taxonom\u00eda, y la segunda en el tipo, etiqueta de la taxonom\u00eda. Y esto se aprecia mediante las URLs.<\/p>\n
\"instalado-types\"<\/a> \"activar-plugin\"<\/a><\/p>\n
\"tipos-de-entradas\"<\/a><\/p>\n
\"coches-types\"<\/a><\/p>\n
 <\/p>\n
Ejemplos:<\/strong><\/p>\n
Para acceder a un coche determinado<\/strong>
\nhttp:\/\/localhost\/wordpress\/index.php\/coches\/renault-laguna\/<\/p>\n
Para acceder a los coches
\nhttp:\/\/localhost\/wordpress\/index.php\/coches\/<\/strong><\/p>\n
Para acceder a todos los coches empleando taxonom\u00eda personalizada<\/p>\n
http:\/\/localhost\/wordpress\/index.php\/renault\/turismo\/<\/strong><\/p>\n
 <\/p>\n
Una vez realizado esto, podremos mostrar los datos con el plugin views.<\/p>\n
Os dejo un\u00a0v\u00eddeo\u00a0que demuestra su uso.<\/strong>
\nV\u00eddeo 1: https:\/\/www.youtube.com\/watch?v=rornS_-dZqQ<\/a>
\nVideo 2: https:\/\/www.youtube.com\/watch?v=83kIYwazfkA&feature=iv&src_vid=rornS_-dZqQ&annotation_id=annotation_3514611421<\/a><\/p>\n
 <\/p>\n
VIEWS<\/strong><\/span>.<\/p>\n
Ya he comentado que views es de pago.<\/p>\n
Views<\/a><\/strong>\u00a0permite crear sitios web completos sin c\u00f3digo.<\/strong><\/p>\n
Plantillas de dise\u00f1o para p\u00e1ginas simples.
\nConsulta contenido y lo visualiza en todos lados
\nConstruye buscadores param\u00e9tricos para realizar b\u00fasquedas.
\nCrea tus propios widgets
\nSi deseas no hace falta programar, aunque puedes editar a mano cada plantilla generada. Desde la inserci\u00f3n de divs, generaci\u00f3n de estilos CSS en editores propios
\n<\/strong>Podemos crear paginadores y filtros autom\u00e1ticamente.
\nSoporte de AJAX.
\nIntegraci\u00f3n mediante shortcodes.
\nPlantillas predise\u00f1adas y bloques reutilizables.<\/p>\n
Ver la documentaci\u00f3n del producto.<\/p>\n
https:\/\/wp-types.com\/documentation\/user-guides\/#types-topics<\/a><\/p>\n
Eso es todo, a seguir investigando.<\/p>\n","protected":false},"excerpt":{"rendered":"
El dise\u00f1o de p\u00e1ginas web, ha cambiado y mucho durante esta \u00faltima d\u00e9cada. Lejos quedan los tiempos en los que todo el mundo dise\u00f1aba webs con un mero editor de texto. Se trabajaba creando desde cero los cimientos y s\u00f3lo se necesitaban conocimientos HTML para\u00a0\u201cprogramar\u201d. Los Dise\u00f1os eran pr\u00e1cticamente HTML, con ausencia de CSS. Llegaron las herramientas gr\u00e1ficas de las cuales Frontpage y Dreamweaver fueron exponentes y \u201cfacilitaron\u201d la creaci\u00f3n de p\u00e1ginas, mediante men\u00fas, extensiones, etc \u00a0de una forma m\u00e1s visual. El inconveniente era que ensuciaba el c\u00f3digo generado, y se perd\u00eda el control del sitio. Posteriormente mediante la inclusi\u00f3n de herramientas totalmente visuales se pod\u00eda construir webs. El poder del CSS se perfecciona y surgen nuevas versiones del lenguaje HTML. La llegada de CMS como Joobla, WordPress, Drupal, Typo3, \u2026 empezaron a reemplazar los dise\u00f1os sin herramientas backend ni contenidos din\u00e1micos. \u00a0Entre ellos destac\u00f3 WordPress, de hecho, cop\u00f3 el mercado, siendo 1 de cada 4 p\u00e1ginas mostradas en Internet desarrolladas con este potente CMS. \u00bf Malos tiempos para los programadores?<\/p>\n","protected":false},"author":1,"featured_media":4122,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[122,664],"class_list":["post-8517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-plugin","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8517","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=8517"}],"version-history":[{"count":6,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8517\/revisions"}],"predecessor-version":[{"id":8529,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/posts\/8517\/revisions\/8529"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media\/4122"}],"wp:attachment":[{"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/media?parent=8517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/categories?post=8517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.palentino.es\/blog\/wp-json\/wp\/v2\/tags?post=8517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}