{"id":798,"date":"2019-08-18T12:14:47","date_gmt":"2019-08-18T10:14:47","guid":{"rendered":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/?page_id=798"},"modified":"2019-08-18T12:14:47","modified_gmt":"2019-08-18T10:14:47","slug":"6-5-guia-practica-configura-un-porfolio-en-wordpress-2","status":"publish","type":"page","link":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/6-5-guia-practica-configura-un-porfolio-en-wordpress-2\/","title":{"rendered":"6.5. Gu\u00eda pr\u00e1ctica: configura un porfolio en WordPress"},"content":{"rendered":"<p>En este apartado, configuraremos un porfolio en WordPress con el complemento \u00ab<a href=\"https:\/\/wordpress.org\/plugins\/tlp-portfolio\/\" target=\"_blank\" rel=\"noopener noreferrer\">Portfolio<\/a>\u00bb. B\u00fascalo en el repositorio oficial, desc\u00e1rgalo y act\u00edvalo.<\/p>\n<p>Ve a la secci\u00f3n de <strong>\u00abCategor\u00edas\u00bb<\/strong> (\u00abPortfolio &gt; Categories\u00bb) y crea las categor\u00edas que estimes oportunas.<\/p>\n<div class=\"featured featured-grey\"><p>Imagina que eres periodista y tienes trabajos en diferentes medios. Puedes establecer las categor\u00edas \u00abprensa\u00bb, \u00abradio\u00bb y \u00abtelevisi\u00f3n\u00bb.<\/p>\n<\/div>\n<p>En la secci\u00f3n <strong>\u00ab<\/strong><strong>Etiquetas\u00bb<\/strong> puedes crear las etiquetas que estimes oportunas. Por ejemplo, medio local, medio regional, medio nacional y medio internacional. De todas formas, estas etiquetas tambi\u00e9n puedes introducirlas manualmente en cada uno de los art\u00edculos del portfolio.<\/p>\n<p>En la <strong>\u00abConfiguraci\u00f3n b\u00e1sica\u00bb<\/strong> (\u00abPortfolio &gt; Settings\u00bb) puedes escoger el color dominante para el porfolio, el tama\u00f1o medio de imagen (cuando haces clic en ella para verla a mayor tama\u00f1o), la posibilidad de incluir un enlace a la p\u00e1gina en cuesti\u00f3n, la posibilidad de incluir los iconos sociales para poder compartir en redes sociales y, para los m\u00e1s avanzados, la posibilidad de personalizar el aspecto gr\u00e1fico mediante la inclusi\u00f3n de un c\u00f3digo CSS personalizado.<\/p>\n<figure id=\"attachment_200\" aria-describedby=\"caption-attachment-200\" style=\"width: 765px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-200 size-full\" src=\"\/wp-content\/uploads\/2019\/07\/m4352_020.jpg\" alt=\"\" width=\"765\" height=\"455\" srcset=\"\/wp-content\/uploads\/2019\/07\/m4352_020.jpg 765w, \/wp-content\/uploads\/2019\/07\/m4352_020-300x178.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><figcaption id=\"caption-attachment-200\" class=\"wp-caption-text\">Panel de configuraci\u00f3n del complemento \u00abPortfolio\u00bb en WordPress.<br \/>Fuente: WordPress<\/figcaption><\/figure>\n<p>Ahora s\u00ed, vamos a crear elementos en el porfolio. Dir\u00edgete a \u00abPortfolio &gt; Add portfolio\u00bb para abrir un nuevo editor e insertar los datos relativos a tu trabajo. Deber\u00edas cubrir los siguientes datos:<\/p>\n<ul>\n<li>T\u00edtulo.<\/li>\n<li>Cuerpo de texto: una breve descripci\u00f3n del trabajo realizado.<\/li>\n<li>Indicar (al menos) una categor\u00eda en el men\u00fa a la derecha.<\/li>\n<li>Seleccionar una imagen destacada (en el men\u00fa a la izquierda, al final de todo) para que se vea en el porfolio final. Recuerda que las im\u00e1genes son fundamentales.<\/li>\n<li>En los detalles del porfolio, bajo el cuerpo de texto, podemos indicar:\n<ul>\n<li>Una descripci\u00f3n corta.<\/li>\n<li>La URL del proyecto. Puede ser la del propio art\u00edculo que est\u00e1s escribiendo, pero para poder verla junto al t\u00edtulo tienes que guardar o publicar el art\u00edculo previamente.<\/li>\n<li>Las herramientas empleadas en el proyecto.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<figure id=\"attachment_194\" aria-describedby=\"caption-attachment-194\" style=\"width: 765px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" class=\"wp-image-194 size-full\" src=\"\/wp-content\/uploads\/2019\/07\/m4352_021.jpg\" alt=\"\" width=\"765\" height=\"680\" srcset=\"\/wp-content\/uploads\/2019\/07\/m4352_021.jpg 765w, \/wp-content\/uploads\/2019\/07\/m4352_021-300x267.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><figcaption id=\"caption-attachment-194\" class=\"wp-caption-text\">Edici\u00f3n de elementos del porfolio.<br \/>Fuente: WordPress<\/figcaption><\/figure>\n<p>Una vez tengamos estos datos, podemos publicar el elemento y continuar con la publicaci\u00f3n de nuevos elementos siguiendo los pasos descritos.<\/p>\n<p>Para insertar el portafolio emplearemos un c\u00f3digo corto del men\u00fa \u00abPortfolio &gt; Shortcode\u00bb. En esa opci\u00f3n, estableceremos c\u00f3mo queremos que sea el porfolio. Las opciones de las que disponemos son las siguientes:<\/p>\n<ul>\n<li><strong>Layout<\/strong>: con cuatro disposiciones diferentes.<\/li>\n<li><strong>Column<\/strong>: una disposici\u00f3n de parrilla con hasta seis columnas con tus proyectos.<\/li>\n<li><strong>Order by<\/strong>: ordena los elementos por nombre, identificador, el orden en el men\u00fa.<\/li>\n<li><strong>Order<\/strong>: muestra el orden anterior de forma ascendente o descendente.<\/li>\n<li><strong>Total Number<\/strong>: delimita el n\u00famero m\u00e1ximo de elementos que aparecer\u00e1n en pantalla. Si lo dejas en blanco, se mostrar\u00e1n todos (ya tengas uno o cientos de elementos).<\/li>\n<li><strong>Category<\/strong>: permite indicar qu\u00e9 categor\u00edas aparecer\u00e1n visibles en el porfolio.<\/li>\n<li><strong>Disable image<\/strong>: permite desactivar las im\u00e1genes asignadas a cada elemento (no recomendable).<\/li>\n<li><strong>Short description limit<\/strong>: limita el n\u00famero de caracteres de la descripci\u00f3n al n\u00famero que elijas. Por defecto, el l\u00edmite es de 100 caracteres.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"alignnone wp-image-196 size-full\" src=\"\/wp-content\/uploads\/2019\/07\/m4352_022.jpg\" alt=\"\" width=\"765\" height=\"592\" srcset=\"\/wp-content\/uploads\/2019\/07\/m4352_022.jpg 765w, \/wp-content\/uploads\/2019\/07\/m4352_022-300x232.jpg 300w\" sizes=\"(max-width: 765px) 100vw, 765px\" \/><\/p>\n<p>Tambi\u00e9n podemos modificar el estilo de los elementos:<\/p>\n<ul>\n<li><strong>Title color<\/strong>: selecci\u00f3n de un color del t\u00edtulo. Por defecto toma como referencia el color dominante de la web.<\/li>\n<li><strong>Title Font Size<\/strong>: selecciona el tama\u00f1o de la fuente, entre 10 y 50 p\u00edxeles.<\/li>\n<li><strong>Title font weight<\/strong>: se\u00f1ala el estilo de la fuente, como negrita, cursiva, etc.<\/li>\n<li><strong>Title alignment<\/strong>: modifica el alienado del t\u00edtulo (a la izquierda, a la derecha, al centro o justificado). Por defecto toma como referencia los t\u00edtulos de la web.<\/li>\n<li><strong>Short description color<\/strong>: selecci\u00f3n de un color del texto de la descripci\u00f3n. Por defecto toma como referencia el color dominante de la web.<\/li>\n<li><strong>Short description font size<\/strong>: selecciona el tama\u00f1o de la fuente, entre 10 y 50 p\u00edxeles, para la descripci\u00f3n.<\/li>\n<li><strong>Short description font weight<\/strong>: se\u00f1ala el estilo de la fuente, como negrita, cursiva, etc. para la descripci\u00f3n.<\/li>\n<li><strong>Short description alignment<\/strong>: modifica el alienado del t\u00edtulo (a la izquierda, a la derecha, al centro o justificado). Por defecto toma como referencia el estilo de los p\u00e1rrafos de la web.<\/li>\n<\/ul>\n<p>Para finalizar, copia el c\u00f3digo corto (es el c\u00f3digo que figura entre corchetes) que figura en un fondo azul. Si te fijas, cada vez que modificas alg\u00fan par\u00e1metro de \u00abLayout and filter\u00bb, el c\u00f3digo corto cambia. Este c\u00f3digo ser\u00e1 algo parecido a:<\/p>\n<div class=\"featured featured-blue\"><p>[tlpportfolio layout=\u00bb1&#8243; col=\u00bb3&#8243; orderby=\u00bbtitle\u00bb order=\u00bbASC\u00bb]<\/p>\n<\/div>\n<p>Crea una nueva p\u00e1gina para mostrar tus trabajos y, en el cuerpo de la p\u00e1gina, pega el c\u00f3digo que aparece en tu <em>plugin<\/em> porfolio. Guarda los datos y ya tienes tu porfolio listo. Recuerda que tienes que insertar la p\u00e1gina en el men\u00fa principal de tu web (\u00abApariencia &gt; Men\u00fas\u00bb) para que sea visible en el <em>FrontEnd<\/em>.<\/p>\n<p>Ya has creado tu primer porfolio en WordPress. Ahora, todo depende de lo que quieras contar y c\u00f3mo lo quieras contar. La herramienta est\u00e1 en tu mano para hacer un mejor o m\u00e1s accesible porfolio.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este apartado, configuraremos un porfolio en WordPress con el complemento \u00abPortfolio\u00bb. B\u00fascalo en el repositorio oficial, desc\u00e1rgalo y act\u00edvalo. Ve a la secci\u00f3n de \u00abCategor\u00edas\u00bb (\u00abPortfolio &gt; Categories\u00bb) y crea las categor\u00edas que estimes oportunas. En la secci\u00f3n \u00abEtiquetas\u00bb puedes crear las etiquetas que estimes oportunas. Por ejemplo, medio local, medio regional, medio nacional [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/798"}],"collection":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":1,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/798\/revisions"}],"predecessor-version":[{"id":800,"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/798\/revisions\/800"}],"wp:attachment":[{"href":"http:\/\/portafoli-wordpress.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}