Archivo de la etiqueta: wordpress

wordpress-shortcode

Los shortcodes son una utilidad de wordpress que se puede utilizar en cualquier cuadro de contentido (páginas, entradas, etc…) para que realice una llamada a una función previamente definida.

Los shortcodes son muy utilizados en plugins, dónde se definen para que realicen una determinada función, como por ejemplo cargar un formulario de contacto, un mapa, una galería, etc…

Ahora bien, quizás os ocurra como a mí y necesitéis hacer una llamda de un shortcode desde dentro del código, por ejemplo desde una plantilla (template) y veréis que no os funciona con dejar escrito el [shortcode].

Esto ocurre porqué el código definido dentro de los archivos .php no pasa por el loop de wordpress y por lo tanto la función que se encarga de traducir los shortcodes a sus respectivas funciones no lo lee, lo cual si hace con el contenido de las páginas o entradas.

Finalmente y después de investigar la mejor forma de conseguir ejecutar un shortcode desde el código es con una llamada a una función de wordpress.

<php echo do_shortcode (“[shortcode]“);?>

Simplemente sustituir [shortcode] por el nombre de vuestro shortcode :)

 

wordpress seo tema

Como sacar el valor del ID de una entrada como una variable en PHP

En WordPress cada entrada tiene su identificador único (post ID). Durante el loop es cuando WordPress procesa y muestra las entradas que deben ser mostradas en la página en cuestión, en función de los tags del Loop.

La función the_ID se puede utilizar fácilmente para mostrar el ID de la entrada dentro del post, se puede utilizar este tag con el siguiente formato:

Ejemplo de código para WordPress:

<?php the_ID(); ?>

Pero esto sólo funciona dentro del loop de WordPress.

Para obtener el ID de la entrada fuera del Loop, como por ejemplo en el header, footer o incluso en el sidebar de nuestro blog en WordPress tendremos que hacerlo de otra forma. En su lugar utilizaremos $post->ID el cual devuelve el ID de la entrada (también se puede utilizar dentro del loop). Tenemos que declarar $post como una variable global.

Ejemplo de código para WordPress:

// Funciona dentro del Loop
 function function_name() {
 global $post;
 $thePostID = $post->ID;
 }

Ejemplo de código para WordPress:

// Funciona en una entrada o página fuera del Loop
 function function_name() {
 global $wp_query;
 $thePostID = $wp_query->post->ID;
 }

$post->ID se puede llamar directamente fuera del Loop en una entrada de nuestro propio tema de WordPress.

Si os gusta editar vuestros temas de WordPress como a mí, os vendrán bien este tipo de cosillas ;)

Voy a dejar una pequeña lista de modificaciones que se le pueden hacer fácilmente al fichero style.css del nuevo tema (template) por defecto de wordpress “Twenty Eleven”.

De esta forma podremos darle un estilo mucho más personalizado sin demasiado esfuerzo.

La idea es aprender de estas modificaciones y empezar a trastear con el CSS hasta dejarlo a nuestro gusto personal. Aunque puedes copiarlo tal cual y ver como queda.

editar tema wordpress css

 

Listado de modificaciones del CSS del fichero style.css del Tema: Twenty Eleven de WordPress

 

#site-title a – Cambiar varios parámetros del Título del sitio (color, tamaño, tipo de letra, etc…)

#site-title a {
color: red;
font-family: times New Roman;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}

 

#site-title a:hover – Si quieres cambiar el color del mouse over del Site Title

#site-title a:hover, #site-title a:focus, #site-title a:active {
color: #1982D1;
}

 

#site-title – Para quitar el espacio en blanco que se deja en la parte de arriba del Título de la web.

#site-title {
margin-right: 270px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 1.65625em;
}

 

#site-description – Si quieres quitar el espacio en blanco que hay justo debajo del Título de la web, entre este y la imagen de la cabecera.

#site-description {
color: #7A7A7A;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

 

#site-description – Para modificar la descripción (color, fuente, tamaño, etc…)

#site-description {
color: blue;
font-family: tahoma;
font-size: 14px;
margin-bottom: 1.65625em;
margin-left: 0;
margin-right: 270px;
margin-top: 0;
}

 

#branding img – Para modificar el tamaño de la Cabecera

#branding img {
height: 100px;
margin-bottom: -7px;
width: 100%;
}

 

#branding #searchform – Si quieres ocultar mediante CSS el formulario de búsqueda, aunque recomiendo hacerlo desde código php.

#branding #searchform {
display: none;
position: absolute;
right: 7.6%;
text-align: right;
top: 3.8em;
}

 

#acess – Para cambiar el color de fondo del menú de navegación (el superior).

#access {
background-image: -moz-linear-gradient(#252525, red);
}

 

#acess a – Para cambiar el color de la fuente de los enlaces (si no lo cambias todos serán enlaces) del menú de navegación.

#access a {
color: red;
display: block;
line-height: 3.333em;
padding-bottom: 0;
padding-left: 1.2125em;
padding-right: 1.2125em;
padding-top: 0;
text-decoration: none;
}

 

.entry-title, entry-title a – Si quieres cambiar el título de una entrada (post), puede modificar la fuente, el color, el tamaño, etc…

.entry-title, .entry-title a {
color: red;
font-family: tahoma;
font-size: 1.2em;
text-decoration: none;
}

 

Para entradas individuales del blog de Twenty Eleven.

.singular .entry-title {
color: #000000;
font-size: 36px;
font-weight: bold;
line-height: 48px;
}

 

.entry-title a:hover, .entry-title a:focus, .entry-title a:active – Para modificar el mouse hover del título del post del theme Twenty Eleven.

.entry-title a:hover, .entry-title a:focus, .entry-title a:active {
color: #1982D1;
}

 

.entry-meta – Para ocultar mediante CSS la información sobre la entrada (fecha, etc…), también ayudará a esconder la información meta del Footer.

.entry-meta {
clear: both;
color: #666666;
display: none;
font-size: 12px;
line-height: 18px;
}

 

.entry-content p – Si quieres editar el formato del contenido de una entrada (color, fuente, tamaño, etc…).

.entry-content p {
font-family: times New Roman;
color: red;
font-size: 1.1em;
}

 

.widget-title – Para editar el formato de los títulos de los widgets que tenemos en el sidebar de Twenty Eleven.

.widget-title {
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}

 

.widget-title – Si quieres añadir a los títulos de tus widgets un fondo de color.

.widget-title {
background-color: gold;
color: black;
font-family: times New Roman;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.1em;
line-height: 2.6em;
padding-left: 37px;
text-transform: uppercase;
}

 

.widget a – Para modificar el formato los enlaces que hay dentro de los widgets.

.widget a {
color: black;
font-family: times New Roman;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}

#primary & #secondary – Son los contenedores central y sidebar respectivamente, con este código incrementamos el tamaño del sidebar de la derecha que lleva Twenty Eleven.

#primary {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: -26.4%;
margin-top: 0;
width: 90%;
}

#secondary {
float: right;
margin-right: 7.6%;
width: 24.8%;
}

 

#comments – Para esconder mediante CSS tus comentarios, lo recomendable es hacerlo desde el código php.

#comments {
display: none;
}

 

#comment-content p – Si quieres editar el formato del contenido de tus comentarios.

.comment-content p {
color: red;
font-family: times New Roman;
font-size: 16px;
}

.comment-meta – Si quieres cambiar el formato del contenido meta de los comentarios (Nombre del autor y fecha).

.comment-meta {
font-size: 16px;
line-height: 2.2em;
}

body – Para cambiar el color de fondo del tema Twenty eleven.

body {
background-color: red;}

 

#page – Para modificar el fondo de la página, la caja principal. Si no sabes a lo que me refiero, ponle color amarillo y enseguida verás lo que modifica.

#page {
background-color: yellow;
}

.entry-header .comments-link a – Si no quieres que se muestre el bocadillo con el número de comentarios en la parte derecha de las entrada, esto es nuevo con el tema Twenty Eleven.

.entry-header .comments-link a {
display: none;
}

 

#content – Para cambiar el fondo de las entradas.

#content {
background-color: gold;
margin-bottom: 0;
margin-left: 7.6%;
margin-right: 34%;
margin-top: 0;
width: 58.4%;
}

 

#branding hgroup – Si quieres eliminar todo el bloque que hay encima de la imagen del encabezado (título, descripción y search) mediante CSS, como antes, esto se debería hacer desde el código php para hacerlo correctamente.

#branding hgroup {
display: none;
margin: 0 7.6%;
}

 

#access a – Para cambiar el espacio entre los elementos del menú de navegación del tema Twenty Eleven.

#access a {
color: black;
display: block;
font-size: 14px;
line-height: 3.333em;
padding: 0 0.6em;
text-decoration: none;
}

 

Si quieres alinear los post, el título del sitio y el menú de navegación a la izquierda en el tema Twenty Eleven utiliza el siguiente código CSS.

#branding hgroup {
margin: 0 0.6%;
}
#access div {
margin: 0 0.6%;
}
#content {
margin: 0 34% 0 0.6%;
width: 58.4%;
}

 

#content – Para añadir un borde a la parte derecha del contenido de los post prueba el siguiente código CSS.

#content {
border-right: 1px dotted;
margin: 0 34% 0 0.6%;
padding-right: 11px;
width: 61.4%;
}

.widget ul li – Para quitar la bolita en los elementos de las listas que salen en el sidebar de la derecha, edita el siguiente código CSS en el archvio style.css del tema Twenty Eleven.

.widget ul li {
color: #777777;
font-size: 13px;
list-style: none outside none;
}

 

.widget – Si quieres añadir un borde después de cada widget del sidebar utiliza el siguiente código CSS.

.widget {
border-bottom: 1px dotted grey;
clear: both;
padding: 15px 0 20px;
}

 

Hay muchísimas más modificaciones que se pueden hacer, el fichero style.css del tema Twenty Eleven tiene más de 2000 líneas de código, por lo que aprender a editarlo completamente requerirá algo de tiempo. Espero que esta recopilación de pequeñas ediciones os haya servido para tomar contacto con el CSS y atreveros a ir editando vuestro tema poco a poco.

Ya que está aquí Wordpres 3.2 y viene cargado de novedades, para que no os perdáis ninguna os las describimos en la entrada ;)

Además hemos dejado en la sección de descargas un enlace para poder descargar la última versión de WordPress.

Una de las cosas que más importancia tienen en la actualización es que viene el nuevo theme por defecto de WordPress, “TwentyEleven”, con muchas mejoras, convirtiendo nuestro CMS preferido en algo más rápido y ligero.

Actualmente WordPress es el CMS con mayor número de usuarios, el cual fue ganador de la categoría Hall of Fame CMS durante la última edición de los Open Source Awards.

wordpress 32 seo

Cambios Destacados

  • Nueva UI de Administración - Admin rediseñado
  • Nueva tema por defecto “Twenty Eleven” - Utiliza las últimas características del tema
  • Editor a Pantalla Completa - Escritura sin distracciones
  • Barra de Admin Extendida - Mas enlaces de control útiles para controlar la web
  • Cambios en los Requisitos
    • PHP 5.2.4 o superior (antes era PHP 4.3)
    • MySQL 5.0.15 o superior (antes era MySQL 4.1.2)
  • Compatibilidad con los Navegadores de Internet Mejorada
    • Ya no tiene soporte para Internet Explorer 6
    • Nuevo ciclo de Fin-de-vida (EOL) para Internet Explorer 7
    • Se avisará a los usuarios que tienen el navegador obsoelto
  • WordPress es más Rápido y Ligero
    • Las páginas cargan antes
    • Actualizaciones más rápidas
    • Entre otras más mejoras de rendimiento
Para ver todos los cambios en esta versión podéis visitar la página oficial en este enlace