instructivo creación de themes wordpress

7/23/2019 Instructivo creacin de themes Wordpress

1/18

Instructivo 17 Febrero 2015

Descripcin

Creacin de themes paraWordpress

El siguiente instructivo muestra como desarrollar Themessencillos en Wordpress

Temas Estructura de un Theme

El API de Wordpress El loop de Wordpress


2/18

Wordpress es un CMS altamente flexible, con una curva de aprendizaje que permiteavanzar muy rpido hacia un conocimiento profundo del softare y para losdesarrolladores eb, resulta bastante ami!able entrar en contacto con las funcionesdel "#$ de ordpress, ya que los nombres indican exactamente lo que el cdi!o hace%

#ara que la creacin de sitios eb con ordpress pueda tener un alto !rado depersonalizacin, resaltando el aspecto !rfico como la primera l&nea de contacto conlos usuario finales, es deseable que el dise'o del sitio se pueda replicarcompletamente en el CMS% (n el mercado existe una !ran variedad de )hemes

!ratuitos y comerciales, pero es probable que no se ajusten en un *++ a lasexpectativas que tenemos% #or estas razones, la creacin, modificacin y adaptacinde themes es una materia de !ran inter-s para quienes han ele!ido Wordpress comola herramienta para la creacin de su sitio%

(structura de directorios y archivos

.os archivos esenciales para que un theme sea reconocido como tal en ordpressson/

style%css index%php header%php footer%php sidebar%php screenshot%pn! functions%php

Ciertamente, es posible hacer themes extremadamente sencillos teniendo slo losarchivos style%css e index%php, pero ce'irse a la estructura mencionada, nos permitecaminar hacia desarrollos mas elaborados%

0especto a los directorios, los elementos mas bsicos son/

.an!ua!es $ma!es 1s 2javascript3

Estructura de un Theme


3/18

"l i!ual que mencionbamos con los archivos, tambi-n es posible obviar estosdirectorio o a!re!ar mas en el caso de que alojen archivos importantes para eltheme, en este sentido, es frecuente que se incorporen directorio con frameor4scomo 5oundation o 6ootstrap%

5inalmente, la estructura de archivos y directorios de nuestro theme, puede sersimilar a lo si!uiente/

Estructura de un Theme

escripcin de funciones

Mencionar- al!unas funciones de cada archivo para resaltarsu importancia%

Style.css: #ermite se'alar informacin de versin, autor,sitio eb del fabricante, etc% (stos datos aparecen en ecomentario que antecede las re!las de estilos%

Screenshot.png: #ermite mostrar una miniatura de la!rfica del theme%

Index.php: Continen el cuerpo de la p!ina o llamados aincluir sus parte en el caso de haber separado enl header yfooter%

Functions.php: 7efine al!unos elementos como lasposiciones de los sidebars, men8s, tipo!raf&as, etc%

(n la ima!en se omiten los archivos header, footer ysidebar, ya que sern tratados con detalle mas adelante%


4/18

Wordpres nos entre!a una serie de funciones que permiten desde obtenerinformacin del CMS hasta definir al!unas funcionalidades del theme% 0evisaremoslos mas importantes/

get_header

$ncluye la plantilla de cabecera contenida por defecto en el fichero header%php deldirectorio de nuestro theme actual


5/18

get_search_#orm

Muestra el formulario de b8squeda definido en el fichero searchform%php de nuestro)heme/

=>php !et:search:form23? >@

comments_templateCar!a la plantilla de comentarios del directorio de nuestro theme actual%

=>php comments:template2A fichero, separador B3? >@

(l parmetro fichero es el nombre del fichero con la plantilla que queremos car!ar% (lparmetro separador, corresponde a un booleano que indica si se separan o no, loscomentarios por tipo de comentario, por defecto es false%

get_#ooter

$ncluye la plantilla de #ie de #!ina de nuestro blo! que por defecto se encuentra enel fichero footer%php del directorio de nuestro theme actual

=>php !et:footer2A nombre B3? >@

(l parmetro nombre indica si le pasamos el nombre para obtener elfichero footer ;nombre


6/18

(tiquetas de $nformacin del 6lo!

$login#o

Muestra informacin sobre nuestro blo!, la cual suministramos en nuestro #erfil desuario y Dpciones Eenerales del #anel de "dministracin%

=Fphp blo!info2A mostrar B3? >@

7ependiendo de lo que queramos mostrartenemos las si!uientes opciones/

admin_mail:eMail del usuario "dministradoratom_url:0. de nuestro 5eed "tomcomments_rss%_url:0. 5eed 0SS de Comentariosdescription:7escripcin de nuestro blo!url:0. de nuestro blo!

&ame:)&tulo del blo!stylesheet_directory:7irectorio de las hojas de estilotemplate_directory:0. del directorio theme activo

'emplos:

*% Mostrar el t&tulo de nuestro 6lo! y su descripcin


7/18

get_blogin#o

(s i!ual que la etiqueta anterior, pero lo que nos devuelve al hacer la consulta de la$nformacin, lo podemos almacenar para se!uir trabajando con ella en #H#%


8/18

/p_list_categories

Muestra una lista de cate!or&as como enlaces


9/18

/p_list_pages

.ista las p!inas estticas en forma de lin4 a su correspondiente eb%

=>php p:list:pa!es2A ar!umentos B3? >@

.os ar!umentos disponibles son/

exclude:(xcluir cate!or&as 2separar $7 por comas3include:$ncluir solo las cate!or&as indicadas 2$73sort_column: Drdenar la lista de p!inas de diferentes formas/ "lfabeticamente2post:title3, Drden de #!ina 2menu:order3, 5echa 2post:date3, $dentificador 2$73title_li:)itulo cabecera de la lista a mostrarnumber:(stablece el n8mero de p!inas a mostrardepth:Livel de profundidad de las p!inas a mostrar/ + 2 todas3, * 2 superiores3

'emplos:

*% Mostrar slo las p!inas R y GN y titular la lista como IWord#ressK


10/18

'tiuetas de ;ogin

/p_login_url

7evuelve la 0. que permite a un usuario hacer lo!in para entrar al sistema%

=>php p:lo!in:url2A rediri!ir B3? >@

Si indicamos una 0. en Irediri!irK, despu-s de hacer lo!in nos rediri!e a esadireccin%

'emplos:

*% so por defecto/


11/18

/p_loginout

(s una combinacin de las dos funciones anteriores en la que si muestra un lin4 parahacer lo!in, o si el usuario ya est dentro muestra un lin4 para salir%


12/18

the_permalin=

Muestra la 0. del enlace permanente del post%


13/18

the_category

Muestra una lista con los lin4s a las cate!or&as del post%


14/18

'tiuetas de omentarios

comments_number

Muestra el numero total de comentarios, )rac4bac4s y #in!bac4s de un post%


15/18

comment_author_email

Muestra el mail del autor del comentario%


16/18

(l .oop o bucle de Word#ress es una estructura muy bsica 2en #H#3 que permitemostrar los posts de nuestro blo! accediendo para ello a la base de datos% 2.outilizaremos en el )ema de 7ise'o de )hemes"pariencia3 )iene un aspecto !en-ricocomo este/


17/18

N% =div classYKpostK idYpost =>php the:$723? >@K@

"qu& forma una sentencia en html obteniendo, mediante una llamada a una funcinel $7 del post con el que estamos trabajando%

O% =hG@=a hrefYK=>php the:permalin423? >@K relYKboo4mar4K titleYK(nlace#ermanente a =>php the:title23 >@K@=>php the:title23? >@=a@=hG@

(n este caso va a formar un enlace cuyo lin4 ser el enlace permanente a ese post y

cuyo texto del enlace va a ser el t&tulo del post%

R% =p classYKmetaK@Z% =span@#osteado el =span@=>php the:time2A5jS, [B3? >@ =span@por=span@ =>phpthe author23? >@ Dbtiene la fecha del post y el autor que lo cre%\% =p@

P% =>php the:content2A.eer el resto del art&culoB3? >@

Muestra el contenido de la entrada% Si el post ha sido cortado en al!8n momento porla etiqueta =T99more99@ entonces mostrar hasta ah& para terminar con el texto I.eerel resto del art&culoK%

]% =p@=>php the:ta!s2A(tiquetas/ A,B, A, A=br @B3? >@

Muestra las etiquetas del post separadas por comas y con una l&nea en blanco al final

de la lista%

*+% #osteado en =>php the:cate!ory23? >@

$ndica en que cate!or&a ha sido a'adido el post% Curso en l&nea "vanzado de creacinde sitios eb con Word#ressU9 *R 9)ema *% Word#ressU por dentro 2Core3

El Loop de Wordpress


18/18

**% =>php comments:popup:lin42ASin comentariosB, A* comentarioB, AcomentariosB3? >@=p@

Muestra el n8mero de comentarios y el texto que aparece se!8n la cantidad%

*G% =>php next:posts:lin42A"nti!uas entradasB3? >@

Muestra un enlace a entradas anteriores% 20ecordar que un blo! va en orden inverso3

*N% =>php previous:posts:lin42ALuevas entradasB3? >@

Muestra un enlace a nuevas entradas%

*O% =>php else / >@

*R% =hG@Lo existen posts =hG@

(n caso de que no existan posts publicados mostrar el mensaje ILo existen postsK%

(s mejor avisarle a la !ente de que no hay%

*Z% =>php endif? >@

El Loop de Wordpress

instructivo creación de themes wordpress

Documents