Interadictos
Para los que no pueden separarse de internet
Entradas etiquetadas con tutorial
Cassandra 2.x y PHP para desarrolladores SQL: El modelo de datos
0hace 7 años
Si has trabajado con una base de datos relacional tal vez te resulte algo confuso al principio comprender el modelo de datos que usa Cassandra, intentaré ser lo más claro posible, pero si te surgen preguntas no dudes en dejarlas en los comentarios.
Columns
El elemento más básico de la base de datos Cassandra es la columna, se compone de tres elementos: nombre de la columna, valor y timestamp. Os muestro un ejemplo como un array:
array( "nombre" => "email", "valor" => "webmaster@localhost.com", "timestamp" => time(), );
Cassandra añade el timestamp automáticamente, con lo que otra forma de representarlo es como un conjunto clave:valor:
nombre_columna:valor
Super columnas (En desuso) y Columnas Compuestas
Las super columnas son un conjunto de columnas con sus correspondientes valores:
array(
"nombre_superColumna" => array(
"usuario1" => array(
"nombre" => "email",
"valor" => "webmaster@localhost.com",
"timestamp" => time()
),
"usuario2" => array(
"nombre" => "email",
"valor" => "email@email.com",
"timestamp" => time()
),
"usuario3" => array(
"nombre" => "email",
"valor" => "otroemail@otroemail.com",
"timestamp" => time()
),
),
)
Las super columnas tienen algunos problemas de rendimiento, sobre todo al ordenarlas. Para solucionarlo se crearon las columnas compuestas que se benefician de los comparadores compuestos, y sobretodo, de CQL 3 (Cassandra Query Language).
Familia de columnas
Es el conjunto de columnas o super columnas. Me explico:
Las column Family o familia de columnas se puede configurar de dos maneras: como Super o como Standard. Si se elige la opción Standard, en la column family solo se podrán guardar columnas, no super columnas. En cambio si la column family está configurada como Super podrá guardar, además de las columnas, las super columnas. Esta flexibilidad permite jugar con la base de datos y adaptarla a nuestras necesidades.
Ejemplo:
array(
"name" => "ColumnFamily",
array( "name" => "SuperColumn",
array( "colums" )
),
)
Keyspace
El keyspace es nuestra base de datos, donde alojaremos todas las columFamilies que necesitemos.
Ejemplo:
array(
"name" => "keyspace",
array("name" => "columnFamily",
array(
[...]
),
),
)
Cassandra 2.x y PHP para desarrolladores SQL: Instalación
0hace 7 años
La base de datos No-SQL Cassandra fue creada por Facebook a causa de la necesidad de disponer de una base de datos distribuida de alto rendimiento, flexible, tolerante a fallos, escalable y que fuese capaz de procesar grandes cantidades de datos. Más tarde fue liberada bajo licencia Apache y actualmente es utilizada principalmente por empresas de internet con proyectos con un alto uso de base de datos como Twitter.
En esta serie de artículos iré desgranando la instalación, funcionamiento y desarrollo de aplicaciones en PHP con Cassandra, comparando las sentencias utilizadas para insertar, actualizar, etc de SQL con los métodos a utilizar en Cassandra. Por desgracia al ser algo completamente distinto a cualquier base de datos SQL tendré que añadir algo de teoría, pero intentaré que os resulte lo más ameno posible.
Al toro.
REQUISITOS
Para la realización de esta guía se utilizará Debian 8 Jessie como sistema operativo.
Doy por hecho que ya se dispone de un servidor web Apache con PHP instalado en la máquina de testeo que se esté usando. Las aplicaciones que se van a instalar han sido probadas en una máquina virtual Debian 8 Jessie utilizando como aplicación de virtualización VirtualBox, instalado en un host Debian 8 Jessie.
En un servidor de producción recomiendo que tenga bastante RAM (por encima de 1GB, ya veremos más adelante el porqué. En la máquina virtual que uso de testeo dispone de 700 MB y funciona bien, pero en producción no es lo recomendable).
Instalaremos la base de datos Cassandra y PHP-Driver que nos dará la extensión para PHP y una abstracción de la base de datos donde tenemos los métodos básicos para trabajar con Cassandra: insertar, actualizar, borrar, crear, etc.
PREPARANDO EL SISTEMA
Antes de empezar a instalar debemos actualizar el sistema operativo de la forma habitual:
apt-get update apt-get upgrade
Una vez actualizado el sistema empezamos a instalar.
INSTALANDO CASSANDRA
Lo primero que necesitamos hacer para instalar Cassandra es editar los repositorios de Debian:
nano /etc/apt/sources.list
Una vez que se abra el editor añadimos las siguientes lineas:
deb http://www.apache.org/dist/cassandra/debian/ 21x main deb-src http://www.apache.org/dist/cassandra/debian/ 21x main
Como podrás observar después de la ruta del repositorio se ha añadido «21x» esto indica el número de versión a obtener, en este caso es la versión actual de cassandra al crear este post. No se indica el número de parche, es decir, actualmente se puede descargar Cassandra 2.1.
Si dentro de unos meses sale la versión «2.2» solo tendrás que cambiar el uno por el dos.
Volvemos a consola y actualizamos los repositorios.
apt-get update
Nos dará un error en las claves gpg. Procedemos a actualizarlas con las siguientes instrucciones:
gpg --keyserver pgp.mit.edu --recv-keys F758CE318D77295D gpg --export --armor F758CE318D77295D | sudo apt-key add -
Ojo con el guión del final, hay que añadirlo, sino dará error.
Con el paquete 0.7.5 nos da otro error de clave gpg así que también instalamos esta de la misma manera:
gpg --keyserver pgp.mit.edu --recv-keys 2B5C1B00 gpg --export --armor 2B5C1B00 | sudo apt-key add -
También necesitarás añadir la siguiente clave:
gpg --keyserver pgp.mit.edu --recv-keys 0353B12C gpg --export --armor 0353B12C | sudo apt-key add -
Verificamos que tenemos el sistema actualizado.
apt-get update apt-get upgrade
Actualizamos todos los paquetes que aparezcan.
Procedemos a instalar el paquete de la base de datos NoSQL Cassandra:
apt-get install cassandra
Cassandra necesita Java para funcionar. Debian 8 ya dispone de OpenJDK en su versión 7, y aunque desde los desarrolladores de Cassandra no recomiendan su uso, para los ejemplos que vamos a desarrollar nos sirve.
En producción, o si vas a desarrollar un proyecto con Cassandra tendrás que instalar la última versión de Java de Oracle.
Por último, ejecutamos el siguiente comando para construir las dependencias:
dpkg-buildpackage -uc -us
Si el sistema no te reconoce el comando es porque te falta el paquete dpkg-dev. Instálalo de la forma habitual, y vuelve a intentarlo:
apt-get install dpkg-dev
INSTALANDO DATASTAX PHP-DRIVER PARA CASSANDRA
Datastax PHP driver, es el controlador y abstracción de base de datos que utilizaremos para conectar con Cassandra desde PHP. Este controlador nos da la posibilidad de trabajar tanto con CQL (Cassandra Query Language. Parecido a SQL) y/o el protocolo binario de Cassandra.
Aunque en la página del repositorio nos indican varias formas de instalar el controlador (https://github.com/datastax/php-driver/blob/master/ext/README.md), el único que me ha funcionado correctamente ha sido el de descargar las fuentes y compilarlo. Tú puedes probar los otros métodos, pero el que te voy a indicar funciona en Debian 8.
Las siguientes instrucciones deberías ejecutarlas en el ordenador de desarrollo y no en el servidor o máquina virtual donde tengas instalada la base de datos. (A no ser que la hayas instalado en el ordenador de desarrollo).
Instalamos algunos paquetes necesarios para realizar la compilación:
apt-get install g++ make cmake libuv-dev libssl-dev libgmp-dev php5 php5-dev openssl libpcre3-dev git
Primero necesitamos descargar las fuentes desde GitHub, utiliza el directorio que prefieras:
git clone https://github.com/datastax/php-driver.git cd php-driver git submodule update --init cd ext ./install.sh
Estos comandos nos ha creado un archivo llamado cassandra.so en /usr/lib/php5/20131226/ (el número del directorio puede variar en tu instalación. Revísalo).
Ahora creamos un archivo .ini para la extensión de PHP:
nano /etc/php5/mods-available/cassandra.ini
Dentro de ese archivo añadimos las siguientes líneas:
; configuration for PHP driver Cassandra extension=cassandra.so
Guardamos.
Le indicamos a PHP que nos active la extensión
php5enmod cassandra
Y reiniciamos Apache:
/etc/init.d/apache2 restart
Ahora si ejecutamos el siguiente comando para mostrar los módulos de PHP debería aparecernos Cassandra, si no es así es que algo a fallado:
php -m
INICIANDO CASSANDRA POR PRIMERA VEZ
Ahora que ya tenemos todo instalado es el momento de arrancar Cassandra. Esto es algo muy sencillo, solo tienes que ejecutar el siguiente comando:
cassandra -f
También tienes otras maneras de iniciar Cassandra. Por ejemplo como servicio:
service cassandra start
Si al iniciar Cassandra te da un error de memoria, haz lo siguiente:
Accede a /etc/cassandra y edita el archivo cassandra-env.sh:
cd /etc/cassandra nano cassandra-env.sh
Busca las siguientes dos líneas:
#MAX_HEAP_SIZE="4G" #HEAP_NEWSIZE="800M"
Descomenta las dos líneas, y sustituye los valores por unos más bajos. En mi caso he bajado MAX_HEAP_SIZE a 2G y HEAP_NEWSIZE lo he dejado como está.
Estas dos líneas permiten configurar la cantidad de memoria RAM que Cassandra utilizará.
Ahora vamos a utilizar el código de ejemplo que hay en el repositorio de PHP-Driver para probar que todo funciona correctamente.
Crea un archivo PHP con el siguiente contenido:
[codesyntax lang=»php»]
<?php
$cluster = Cassandra::cluster() // connects to localhost by default
->build();
$keyspace = 'system';
$session = $cluster->connect($keyspace); // create session, optionally scoped to a keyspace
$statement = new Cassandra\SimpleStatement( // also supports prepared and batch statements
'SELECT keyspace_name, columnfamily_name FROM schema_columnfamilies'
);
$future = $session->executeAsync($statement); // fully asynchronous and easy parallel execution
$result = $future->get(); // wait for the result, with an optional timeout
foreach ($result as $row) { // results and rows implement Iterator, Countable and ArrayAccess
printf("The keyspace %s has a table called %s\n", $row['keyspace_name'], $row['columnfamily_name']);
}
[/codesyntax]
Este código devuelve las tablas que contiene el Keyspace «system» (Más adelante explicaré que es eso). Si te da error como este: «No hosts available for the control connection», puede ser por dos razones, o bien no está funcionando Cassandra, con lo que tendrás que iniciarla con uno de los comandos anteriores, o bien no la tienes en localhost sino en un servidor externo o máquina virtual.
Para resolverlo tendrás que sustituir las siguientes líneas:
[codesyntax lang=»php»]
<?php
$cluster = Cassandra::cluster() // connects to localhost by default
->build();
[/codesyntax]
Por estas otras:
[codesyntax lang=»php»]
<?php
$cluster = Cassandra::cluster()
->withContactPoints('127.0.0.1')
->build();
[/codesyntax]
Sí, solo añadimos «->withContactPoints(‘127.0.0.1’)», con este método le estamos indicando la ip de nuestro servidor. En tu caso es posible que tengas que sustituir «127.0.0.1» por la ip de tu servidor o máquina virtual. Más adelante explicaré cada método, pero para verificar que está funcionando todo correctamente es suficiente.
Con esto finalizamos la instalación de Cassandra para que pueda ser utilizada por PHP.
Cómo crear un servidor REST en PHP
0hace 9 años
Un servidor REST es una aplicación que nos permite crear, actualizar, eliminar y recuperar datos de forma remota siguiendo el estandar de diseño REST. Lo habitual cuando programamos, por ejemplo peticiones ajax, es nombrar las urls como «/obtenerProducto», «/crearProducto», etc. En REST los verbos «obtener» o «crear» no se usan, ya que se utiliza una única url para todas las acciones, en nuestro ejemplo «/producto». Además, REST nombra a estas urls como recursos.
Para poder diferenciar la acción que se está realizando sobre un recurso concreto se utiliza un método u otro en la petición: GET, POST, PUT o DELETE.
Cómo remplazar el cron de WordPress con un cron job real
0hace 9 años
Es posible que alguna vez hayas programado un post para ser publicado en un momento del día concreto y cuando has entrado a tu blog has visto como el post aun no se había publicado. Esto es algo que puede ocurrir de forma habitual, y puede resultar muy frustrante, además de perder una oportunidad de obtener las visitas que se esperaba tener al programar la publicación del post a una hora concreta.
Para comprender por qué ocurre, necesitamos saber que el WP-Cron no es un cron job real. De hecho es un cron virtual que solo se ejecuta cuando una página se carga (por ejemplo cuando accede un usuario al blog o a una página o post). Esta forma de ejecutar el cron virtual tiene un problema de rendimiento si tienes muchos eventos que ejecutar, o tardan demasiado en terminar.
Discos duros en RAID en Debian
0hace 11 años
Os dejo un tutorial muy interesante y que he utilizado para configurar varios discos duros en RAID 1:
WordPress 3.x para desarrolladores: Temas y plantillas, sidebar.php y sidebar-footer.php
0hace 11 años
Ya hemos creado casi todas las partes importantes que necesita la página principal, pero aun nos quedan algunas cosas más por crear.
SIDEBAR.PHP
Como expliqué en el post anterior, nuestro tema hace dos llamadas a get_sidebar(). La primera se realiza en index.php, y la segunda en footer.php pero pasando a la función un argumento, en este caso ‘footer‘. Este argumento permite a WordPress buscar una plantilla diferente para sidebar que no sea sidebar.php, en nuestro caso necesitará sidebar-footer.php. Si WordPress no encontrase esta plantilla, cargaría la plantilla principal para el sidebar: sidebar.php.
Creamos el archivo sidebar.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<div id="secondary" class="widget-area" role="complementary"> <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?> <aside id="archives" class="widget"> <h3 class="widget-title"><?php _e( 'Archives', 'newtheme' ); ?></h3> <ul> <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?> </ul> </aside> <aside id="meta" class="widget"> <h3 class="widget-title"><?php _e( 'Meta', 'newtheme' ); ?></h3> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </aside> <?php endif; // end sidebar widget area ?> </div><!-- #secondary .widget-area -->
[/codesyntax]
El código es bastante sencillo, abrimos una nueva capa que contendrá los widgets que no sean de la sidebar sidebar-1. Como puedes ver hay un condicional que hace esto mismo, utilizando la función dynamic_sidebar( ‘sidebar-1’ ). Esta función comprueba si hay widgets o no en la sidebar que le indiquemos. Según el código, si no hay widgets añadimos dos a la columna. El primero está dentro de la etiqueta aside. Esta etiqueta pertenece a HTML5 y se utiliza para crear bloques de contenido tangencial, dicho de otra forma, sirve para crear bloques con contenido que tengan alguna relación con el contenido de la página (una cita del texto, publicidad, una imagen, etc.). Seguimos.
Dentro del bloque aside encontramos el título del bloque, en este caso «Archives» y una lista que se genera con la función wp_get_archives(). Esta función crea un listado de links, en nuestro caso mostrará los meses y el año en los que haya algún post publicado. Para más información sobre este método, lo mejor es que acudas a la fuente http://codex.wordpress.org/Function_Reference/wp_get_archives, ahí te explican todas las opciones que tienes para generar ese listado.
El segundo bloque aside nos muestra una serie de vínculos para registrarnos (siempre que el registro de usuarios esté activo) y/o identificarnos. Por último tenemos la función wp_meta() que permitirá a otros plugins añadir más vínculos a la lista.
SIDEBAR-FOOTER.PHP
Ahora vamos a crear los sidebars del pie de la página, para ello creamos el archivo sidebar-footer.php
WordPress nos permite crear plantillas para partes concretas del tema, como por ejemplo estos sidebar que vamos a crear, para ello existe una jerarquía que WordPress siempre respeta, de tal manera que si la plantilla que se le pide no existe busca la siguiente en esa jerarquía.
Aquí teneis un esquema con la jerarquía que sigue WordPress para el contenido: http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
Dicho esto, vamos a crear la plantilla. Creamos el archivo sidebar-footer.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /* The footer widget area is triggered if any of the areas * have widgets. So let's check that first. * * If none of the sidebars have widgets, then let's bail early. */ if ( ! is_active_sidebar( 'sidebar-3' ) && ! is_active_sidebar( 'sidebar-4' ) && ! is_active_sidebar( 'sidebar-5' ) ) return; // If we get this far, we have widgets. Let do this. ?> <div id="supplementary" <?php newtheme_footer_sidebar_class(); ?>> <?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?> <div id="first" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-3' ); ?> </div><!-- #first .widget-area --> <?php endif; ?> <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?> <div id="second" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-4' ); ?> </div><!-- #second .widget-area --> <?php endif; ?> <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?> <div id="third" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-5' ); ?> </div><!-- #third .widget-area --> <?php endif; ?> </div><!-- #supplementary -->
[/codesyntax]
En primer lugar se comprueba si alguno de los tres sidebars está activo, sino se devuelve un return para dar por finalizado el script y que no se genere código html.
En el caso de que alguno, varios o todos los sidebars estén activos se crean sus respectivos bloques, primero comprobando que el sidebar correspondiente está activo, y después cargando los widgets del sidebar con la función dynamic_sidebar( ‘nombre-del-sidebar’ ).
En la capa que alberga los diferentes sidebars se hace una llamada a newtheme_footer_sidebar_class(), esta función la crearemos más adelante en el archivo functions.php, y principalmente lo que hace es crear el atributo class de la capa y su correspondiente valor.
Ahora que ya empezamos a ver algo de contenido, vamos a añadir los estilos. Aquí te dejo a tu elección que hacer, si crearlos tu a mano desde cero o copiar los estilos del tema Twenty Eleven, ya que serían los que se utilizarían para el tema que estamos creando. En cualquier caso solo necesitas, de momento, los estilos del archivo style.css, el resto los iremos añadiendo con posterioridad.
WordPress 3.x para desarrolladores: Temas y plantillas, index.php y content.php
0hace 11 años
Con el anterior post os dejé un poco colgados con el tutorial, expliqué las plantillas más básicas y la creación de las plantillas de la cabecera y el pie, además de la explicación del código de cada una. Pero aun falta la parte más importante de todas, el contenido.
EL BUCLE ( THE LOOP )
Bueno, vamos al lío y explico esto del bucle. En el archivo index.php añadimos el siguiente código entre wp_head() y wp_footer().
[codesyntax lang=»php»]
<div id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <?php newtheme_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php newtheme_content_nav( 'nav-below' ); ?> <?php else : ?> <article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'newtheme' ); ?></p> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?>
[/codesyntax]
Lo primero que hacemos es crear dos capas con id primary y content, ambas contendrán el contenido que se muestre en la página.
Seguidamente tenemos un condicional que comprueba si hay posts para mostrar en la página.
Si es que sí hay posts, WordPress procesará las cinco siguientes líneas de código y dentro de estas nuestro bucle o The Loop.
Antes y después del bucle se hace una llamada a la función newtheme_content_nav(), este es un hook para crear el paginador de post en el caso de que haya más que las que pueden entrar en una página. Esta función la crearemos más adelante en el archivo functions.php.
El bucle while se ejecutará mientras have_posts() sea true, y los datos del post se obtienen de the_post(), que serán procesados en la plantilla correspondiente utilizando get_template_part( ‘content’, get_post_format() ). Esta función (get_template_part()) llama a la plantilla content para procesarla y generar el código html correspondiente.
Si no hay posts entonces se muestra un mensaje al usuario indicando esto mismo.
Cerramos las etiquetas div. Por último nos encontramos con la función get_sidebar(), que nos generará la barra lateral con los widgets de nuestro blog. De hecho ya vimos esta función en la plantilla del pie (footer.php) en ella nos encontramos con la función get_sidebar( ‘footer’ ). La razón de que una función tenga argumento y otra no, radica en la plantilla a usar. En el caso del sidebar del pie, se utilizará sidebar-footer.php y para el sidebar del index.php usaremos la genérica: sidebar.php.
Si ejecutásemos ahora la página principal de nuestro WordPress no veríamos contenido, la razón es que aun no hemos creado la plantilla que muestra el contenido, así que vamos a ello.
CONTENT.PHP
Este archivo es el encargado de mostrar el contenido de los posts y maquetarlo en html. Para ello vamos a crear el archivo content.php y añadir las siguientes líneas de código:
[codesyntax lang=»php»]
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php if ( is_sticky() ) : ?> <hgroup> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <h3 class="entry-format"><?php _e( 'Featured', 'newtheme' ); ?></h3> </hgroup> <?php else : ?> <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1> <?php endif; ?> <?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> <?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?> </header><!-- .entry-header --> <?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?> <footer class="entry-meta"> <?php $show_sep = false; ?> <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?> <?php /* translators: used between list items, there is a space after the comma */ $categories_list = get_the_category_list( __( ', ', 'newtheme' ) ); if ( $categories_list ): ?> <span class="cat-links"> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list ); $show_sep = true; ?> </span> <?php endif; // End if categories ?> <?php /* translators: used between list items, there is a space after the comma */ $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) ); if ( $tags_list ): if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="tag-links"> <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); $show_sep = true; ?> </span> <?php endif; // End if $tags_list ?> <?php endif; // End if 'post' == get_post_type() ?> <?php if ( comments_open() ) : ?> <?php if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'nwtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; // End if comments_open() ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Sí, es mucho código pero como siempre os lo explicaré casi línea por línea.
En primer lugar tenemos las etiquetas article y header del post:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header">
Aquí vemos dos funciones de WordPress, la primera the_ID() sirve para devolver el id del post, el segundo genera las clases de estilos para el post.
Ha continuación tenemos el siguiente bloque condicional dentro de la etiqueta header:
[codesyntax lang=»php»]
<?php if ( is_sticky() ) : ?> <hgroup> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <h3 class="entry-format"><?php _e( 'Featured', 'newtheme' ); ?></h3> </hgroup> <?php else : ?> <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1> <?php endif; ?> <?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> <?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?>
[/codesyntax]
Como puedes ver el condicional comprueba la función is_sticky(). Esta función comprueba si el post ha sido seleccionado para que se mantenga fijo en la página principal o como destacado. Como verás, si el post está fijo en la página principal se mostrará el título de la entrada y un texto (Featured o Destacado) que indica el estado de este.
En el caso que no sea un post destacado se genera el título por defecto. Para generar la url se utiliza la función the_permalink() que genera la url absoluta del post. Además se añade al atributo title del link el título del post.
[codesyntax lang=»php»]
<?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?>
[/codesyntax]
Este código genera el html correspondiente para las etiquetas meta de la página/post: fecha/hora, autor, descripción, etc.
[codesyntax lang=»php»]
<?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?>
[/codesyntax]
Aquí se comprueba si el post permite comentarios y no es requerida una contraseña. Dentro del condicional se crea el link que mostrará los comentarios, además el texto del vínculo será el número de comentarios que tiene el post. Esto crearía un número al lado del título del post, normalmente con un fondo con una burbuja de diálogo.
[codesyntax lang=»php»]
<?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?>
[/codesyntax]
Se comprueba si lo que se está mostrando es una búsqueda, si es así se carga parte del cuerpo del post pero añadiendo al final del texto […].
Si no se está mostrando una búsqueda se carga el contenido con la función the_content(), que en el caso que el post contenga un separador del tipo «read more… » se mostrará un texto que lo indique. Por último se muestran una serie de links para poder ir directamente a las diferentes páginas del post.
[codesyntax lang=»php»]
<footer class="entry-meta"> <?php $show_sep = false; ?> <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?> <?php /* translators: used between list items, there is a space after the comma */ $categories_list = get_the_category_list( __( ', ', 'newtheme' ) ); if ( $categories_list ): ?> <span class="cat-links"> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list ); $show_sep = true; ?> </span> <?php endif; // End if categories ?> <?php /* translators: used between list items, there is a space after the comma */ $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) ); if ( $tags_list ): if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="tag-links"> <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); $show_sep = true; ?> </span> <?php endif; // End if $tags_list ?> <?php endif; // End if 'post' == get_post_type() ?> <?php if ( comments_open() ) : ?> <?php if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'nwtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; // End if comments_open() ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta -->
[/codesyntax]
Llegamos al pie del post donde se comprobará primero que lo que se muestra es un post y no una búsqueda, en el caso de ser esto afirmativo se cargan las categorías a la que pertenezca el post y se genera su código html correspondiente.
Después se carga el listado de tags o etiquetas y se genera el código html para mostrarlas.
A continuación mostramos de nuevo el número de comentarios del post.
Por último mostramos el link de editar post, siempre y cuando el usuario tenga permiso para ello.
WordPress 3.x para desarrolladores: Temas y plantillas, primeros pasos
0hace 11 años
Una vez que conocemos los conceptos básicos de WordPress y la estructura de archivos que tienen los temas, vamos a empezar a crear nuestro propio tema. Para ello vamos a utilizar el tema Twenty Elevencomo modelo, iré extrayendo partes del código de este tema y pegándolas en el nuestro, de tal forma que pueda explicar el funcionamiento del código y así poder aprender a crear un tema desde cero.
EL TEMA MÁS BÁSICO
Como vimos en el post anterior, el tema más básico que se puede crear en WordPress es el que disponga de los archivos style.css e index.php (en caso de un tema hijo solo sería necesario el archivo style.css, pero eso lo explicaré más adelante). Por tanto vamos a crearlos. Doy por hecho que ya tienes instalado y configurado WordPress en tu entorno de desarrollo, lo único que vamos hacer es activar la muestra de avisos de WordPress durante el desarrollo. Abre el archivo wp-config.php, busca la constante WP_DEBUG y ponla a true.
define('WP_DEBUG', true);
Una vez hecho esto creamos la carpeta de nuestro tema el cual llamaremos newtheme: wp-content/themes/newtheme. A continuación creamos el archivo style.css y añadimos los datos que WordPressnecesita para mostrar el tema en el listado de temas.
/* Theme Name: New Theme Theme URI: http://localhost/newtheme Author: Interadictos.es Author URI: http://interadictos.es Description: Primer desarrollo de un tema Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: basic, white Text Domain: newtheme */
Ahora creamos el archivo index.phpy le añadiremos una única linea de código:
[codesyntax lang=»php»]
<?php echo "Hola mundo"; ?>
[/codesyntax]
Nos vamos a la administración de nuestro WordPressy activamos nuestro tema. Si se ha hecho correctamente nos aparecerá el siguiente texto cuando accedamos a la página principal del blog:
Hola mundo
Ya sé, ya sé, este tema no muestra nada, en realidad acabamos de conocer como crear el tema y hacer que se muestre en la administración para poder activarlo. Podríamos seguir añadiendo código al archivo index.php, pero estaríamos creando algo que a la larga nos resultaría difícil de mantener. Por tanto vamos a dividir nuestro tema en partes para poder trabajar mejor con él.
CREANDO PLANTILLAS
Habitualmente una página web podemos separarla en tres partes: cabecera, cuerpo y pie. En WordPress ocurre lo mismo, de hecho, WordPressnos va a facilitar la tarea de dividir una página ya que dispone de varios métodos creados exclusivamente para ello.
- get_header(): Devuelve la plantilla de la cabecera ya procesada.
- get_footer(): Devuelve la plantilla del pie ya procesada.
Como verás no hay un método como tal para devolver la plantilla del contenido, pero esto lo veremos un poquito más adelante. Vamos a modificar el archivo index.phppara añadir estos dos métodos.
[codesyntax lang=»php»]
<?php get_header(); ?> <?php get_footer(); ?>
[/codesyntax]
Ahora vamos a crear dos plantillas nuevas que se corresponderán con la cabecera de la página y el pie. Lo llamaremos header.php y footer.php.
HEADER.PHP
En header.phpañadimos el siguiente código:
[codesyntax lang=»php»]
<!DOCTYPE html> <!--[if IE 6]> <html id="ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7]> <html id="ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html id="ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> </head> <body <?php body_class(); ?>>
[/codesyntax]
Antes de seguir explicaré un poco el código. Este código es un extracto del archivo header.php del tema twentyeleven que viene incluido con WordPress y que me ha parecido muy bueno para poder utilizarlo como ejemplo. En primer lugar nos encontramos con esto:
<!DOCTYPE html> <!--[if IE 6]> <html id="ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7]> <html id="ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html id="ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
language_attributes() devuelve varios atributos de la etiqueta html, más concretamente el idioma y la dirección del texto. En este caso, además, se cuadriplica para poder diferenciar cada versión de Internet Explorer y del resto de navegadores. A continuación tenemos el inicio de la cabecera propiamente dicha y las etiquetas meta:
<head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" />
WordPress nos provee de muchos métodos para poder hacernos la vida más fácil. Entre esos métodos se encuentra bloginfo() que nos devolverá varios datos referentes al blog que estamos creando. Ver más sobre bloginfo(): http://codex.wordpress.org/Function_Reference/bloginfo La metaetiqueta llamada viewport es utiliza para indicarle a los navegadores móviles el tamaño de la página. Más info en: http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/Seguidamente tenemos el título de la página:
[codesyntax lang=»php»]
<title><?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) ); ?></title>
[/codesyntax]
Primero recupera dos variables globales $page y $paged, que se refieren a la página y el número de páginas en que esté dividido el contenido. Después utiliza el método wp_title() para mostrar el título de la página o post. Esto le indica a WordPress que muestre el título del post o la página y añada un separador «|» al final (derecha) del título.
A continuación se añade el nombre del blog con bloginfo( ‘name’ ). Se recupera la descripción del sitio utilizando get_bloginfo(), se comprueba si existe esa descripción y si la página que se va a mostrar es el homeo la página principal, y se muestra la descripción. Acto seguido se comprueba el número de página en el que se encuentra el usuario y se muestra. Una vez que se procesa el título tenemos las siguientes etiquetas:
<link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]-->
La primera línea si no recuerdo mal está relacionado con el SEO para los buscadores, a la hora de desarrollar no nos afectará.
La segunda linea nos indica el archivo css para la página, en este caso se utiliza bloginfo( ‘stylesheet_url’ ) para recuperar la url del archivo de estilo style.css.
La tercera línea indica al navegador la ruta para el archivo de pingback, es decir el archivo que se dedicará a recibir las notificaciones de otros autores cuando linken a una página de tu blog.
Las últimas lineas son exclusivas para IE9, que como todas las versiones de Internet Explorer siempre hay algo especial que ponerle a cada uno. En este caso es un pequeño código js para HTML5. Recuerda que este archivo aun no está en nuestro tema. Tendrás que crear una carpeta llamada js, y copiar el archivo desde el tema twentyeleven hasta tu tema dentro de la carpeta que acabas de crear. Por último en nuestro archivo header.phpnos encontramos con lo siguiente:
[codesyntax lang=»php»]
<?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> </head> <body <?php body_class(); ?>>
[/codesyntax]
El pequeño script de php tiene un condicional que lo que hace es añadir un pequeño JavaScript en el caso de que los comentarios estén configurados como hilos. Utilizando wp_enqueue_script( ‘comment-reply’ ) le estamos diciendo a WordPress que carge ahí el archivo wp-include/js/comment-reply.js. Como puedes observar, se llama a la función wp_head(). Esto permite a los plugins poder añadir las cabeceras que ellos consideren oportuno.
Por último cerramos la etiqueta head y abrimos body en la que añadiremos las clases correspondientes a través de la función body_class.
Añadimos el siguiente código justo debajo de la etiqueta body:
[codesyntax lang=»php»]
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( $header_image ) :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
// We need to figure out what the minimum width should be for our featured image.
// This result would be the suggested width if the theme were to implement flexible widths.
$header_image_width = get_theme_support( 'custom-header', 'width' );
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
}
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
$image[1] >= $header_image_width ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
$header_image_width = get_custom_header()->width;
$header_image_height = get_custom_header()->height;
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
$header_image_height = HEADER_IMAGE_HEIGHT;
}
?>
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image ?>
<?php
// Has the text been hidden?
if ( 'blank' == get_header_textcolor() ) :
?>
<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>
<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'newtheme' ); ?>"><?php _e( 'Skip to primary content', 'newtheme' ); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'newtheme' ); ?>"><?php _e( 'Skip to secondary content', 'newtheme' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
</header><!-- #branding -->
<div id="main">
[/codesyntax]
Explicaré el código paso a paso:
[codesyntax lang=»php»]
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup>
[/codesyntax]
En primer lugar se abre una etiqueta header y dentro de hgroupse añade el título y la descripción de la página.
[codesyntax lang=»php»]
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( $header_image ) :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
// We need to figure out what the minimum width should be for our featured image.
// This result would be the suggested width if the theme were to implement flexible widths.
$header_image_width = get_theme_support( 'custom-header', 'width' );
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
}
?>
[/codesyntax]
Esta parte comprueba que existe una imagen para la cabecera. Si es que sí se crea un condicional para comprobar que la función get_custom_header existe para que el tema sea compatible con versiones de WordPress anterior a la 3.4. En el caso de que existe se utilizará la función get_theme_support para obtener el ancho para la imagen, sino se utilizará la constante HEADER_IMAGE_WIDTH.
Tanto la constante como el ancho se crean en el archivo functions.php que veremos más adelante.
[codesyntax lang=»php»]
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
$image[1] >= $header_image_width ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
$header_image_width = get_custom_header()->width;
$header_image_height = get_custom_header()->height;
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
$header_image_height = HEADER_IMAGE_HEIGHT;
}
?>
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
[/codesyntax]
Creamos el vínculo con la url de la página principal, el condicional permite tener compatibilidad con versiones anteriores a la versión 3.4 de WordPress. Con get_the_post_thumbnailcreamos la imagen en caso de que sea un post o una página, sino obtenemos el ancho y alto de la imagen y creamos la etiqueta correspondiente.
[codesyntax lang=»php»]
<?php // Has the text been hidden? if ( 'blank' == get_header_textcolor() ) : ?> <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>"> <?php get_search_form(); ?> </div> <?php else : ?> <?php get_search_form(); ?> <?php endif; ?>
[/codesyntax]
Aquí se comprueba el color de texto de la cabecera, si es blanco (blank) se crea una capa con el formulario de búsqueda dentro, si no solo se añade el formulario de búsqueda. El color de texto de la cabecera se configura en functions.php.
[codesyntax lang=»php»]
<nav id="access" role="navigation"> <h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3> <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?> <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'newtheme' ); ?>"><?php _e( 'Skip to primary content', 'newtheme' ); ?></a></div> <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'newtheme' ); ?>"><?php _e( 'Skip to secondary content', 'newtheme' ); ?></a></div> <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access -->
[/codesyntax]
Por último se añade el menú superior de las páginas.
FOOTER.PHP
Añadimos el siguiente código al archivo footer.php:
[codesyntax lang=»php»]
</div><!-- #main --> <footer id="colophon" role="contentinfo"> <?php /* A sidebar in the footer? Yep. You can can customize * your footer with three columns of widgets. */ if ( ! is_404() ) get_sidebar( 'footer' ); ?> <div id="site-generator"> <?php do_action( 'newtheme_credits' ); ?> <a href="<?php echo esc_url( __( 'http://interadictos.es/', 'newtheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'newtheme' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'newtheme' ), 'interadictos.es' ); ?></a> </div> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
[/codesyntax]
En este archivo se cierran las etiquetas que contienen la mayor parte del contenido de la página, se añaden los sidebar (que veremos más adelante) del pie, siempre y cuando no sea una página 404, y se añade el copyright y la información del tema. Por último se añade la función wp_footer que permitirá a los plugins mostrar su propio contenido en el pie de página.
WordPress 3.x para desarrolladores: Convenciones
0hace 11 años
Aunque es un tema cuanto menos, aburrido, es muy necesario a la hora de trabajar en grupo, o si vas a publicar tu plugin o plantilla en WordPress. Las convenciones son normas aplicadas al código para que todos los desarrolladores puedan interpretar el código sin muchos problemas. También por estética: queda más elegante un código con la misma tabulación (por ejemplo) en cada linea que, que cada programador ponga la tabulación que se le antoje. Sin más preámbulos vamos al tema:
COMILLAS SIMPLES Y DOBLES
[codesyntax lang=»php»]
<?php echo '<a href="/static/link" title="Yeah yeah!">Link name</a>'; echo "<a href='$link' title='$linktitle'>$linkname</a>"
[/codesyntax]
Si no tienes nada que evaluar en la cadena, pon comillas simples, sino comillas dobles.
SANGRÍA
Usa tabulaciones y no espacios.
[codesyntax lang=»php»]
<?php $foo = 'somevalue'; $foo2 = 'somevalue2'; $foo34 = 'somevalue3'; $foo5 = 'somevalue4';
[/codesyntax]
Los arrays asociativos deberían empezar en una linea nueva.
[codesyntax lang=»php»]
<?php $my_array = array( 'foo' => 'somevalue', 'foo2' => 'somevalue2', 'foo3' => 'somevalue3', 'foo34' => 'somevalue3', );
[/codesyntax]
LLAVES
En bloques multilinea se deben poner las llaves tal como sigue:
[codesyntax lang=»php»]
<?php
if ( condition ) {
action1();
action2();
} elseif ( condition2 && condition3 ) {
action3();
action4();
} else {
defaultaction();
}
[/codesyntax]
Si solo hay una linea en cada bloque se pueden omitir por brevedad.
[codesyntax lang=»php»]
<?php
if ( condition )
action1();
elseif ( condition2 )
action2();
else
action3();
[/codesyntax]
Si hay un bloque con más de una linea se deberán escribir con llaves:
[codesyntax lang=»php»]
<?php
if ( condition ) {
action1();
} elseif ( condition2 ) {
action2a();
action2b();
}
[/codesyntax]
Los bucles deben contenerse siempre entre llaves:
[codesyntax lang=»php»]
<?php
foreach ( $items as $item ) {
process_item( $item );
}
[/codesyntax]
NO UTILIZAR LA ETIQUETA DE INICIO CORTA DE PHP
La forma correcta sería:
<?php ... ?>
NO CERRAR EL SCRIPT DE PHP CON SU ETIQUETA
Es decir en vez de usar:
<?php ... ?>
Usaremos solo la inicial
<?php ...
USO DEL ESPACIO
Pon espacios siempre después de las comas y en ambos lados de los operadores lógicos, de comparación, de cadenas y de asignación.
x == 23 foo && bar ! foo array( 1, 2, 3 ) $baz . '-5' $term .= 'X'
Pon espacios a ambos lados de los paréntesis de apertura y cierre.
foreach ( $foo as $bar ) { ...
Cuando definas una función, hazlo así:
function my_function( $param1 = 'foo', $param2 = 'bar' ) { ...
Al realizar comparaciones lógicas:
if ( ! $foo ) { ...
Cuando hagas una conversión de tipos:
foreach ( (array) $foo as $bar ) { ...
$foo = (boolean) $bar;
Cuando se hace referencia a un elemento de un array, solo se incluyen espacios en blanco cuando es una variable:
$x = $foo['bar'];$x = $foo[ $bar ];
FORMATEO DE SENTENCIAS SQL
Las partes de la sentencia que sean palabras de SQL deben ir en mayusculas, como SELECT o WHERE.
Es recomendable usar el método $wpdb->prepare() para formatear la sentencia SQL. Este método añadirá las comillas a los valores que lo necesiten.
$var = "dangerous'"; // Los datos en crudo podrían o no necesitar ser formateados $id = some_foo_number(); // El dato que nosotros esperamos es un número, pero no estamos seguros $wpdb->query( $wpdb->prepare( "UPDATE $wpdb->posts SET post_title = %s WHERE ID = %d", $var, $id ) );
%s se utiliza cuando el valor es una cadena (string) y %d cuando es un número. En el método prepare() se añaden las variables que se formatearán y añadirán a la consulta en orden.
CONVENCIONES DE NOMENCLATURAS
Usa letras minúsculas en variables y nombres de funciones. Separa las palabras con guiones bajos (_).
function some_name( $some_variable ) { [...] }
Los nombres de clases deben utilizar palabras capitalizadas separadas con guiones bajos. Las siglas deben estar en mayúsculas:
class Walker_Category extends Walker { [...] }
class WP_HTTP { [...] }
Los archivos deben ser nombrados descriptivamente con letras minúsculas y las palabras deben separarse con guiones.
my-plugin-name.php
Los nombres de archivos de clase se basarán en el nombre de la clase precedido de class- y los guiones bajos de la clase serán sustituidos por guiones, por ejemplo WP_Error pasa a ser:
class-wp-error.php
VALORES DE PARÁMETROS DE FUNCIONES AUTOEXPLICATIVOS
Se prefieren valores de cadena que solo true y false cuando se llama a las funciones.
// Correcto
function eat( $what, $speed = 'slowly' ) {
...
}
eat( 'mushrooms' );
eat( 'mushrooms', 'slowly' );
eat( 'dogfood', 'fast' );
OPERADOR TERNARIO
El operador ternario está bien, pero siempre que lo uses prueba que la sentencia sea verdad, no falsa. De la otra forma es confuso. En el caso de empty() se permite el uso de ! empty(), ya que es más legible.
// (si la sentencia es verdad) ? (hacer esto) : (sino, hacer esto); $musictype = ( 'jazz' == $music ) ? 'cool' : 'blah'; // (si el campo no está vacío ) ? (hacer esto) : (sino, hacer esto);
CONDICIONES YODA
if( true == $the_force ){
$victorious = you_will( $be );
}
Siempre que hagas comparaciones lógicas pon la variable en el lado derecho, la constante o el literal en el izquierdo.
Esto se utiliza para en el caso de que en vez de == pongas = (admítelo, más de una vez te habrá pasado), de esta manera saltará un error ya que no puedes asignar a una constante el valor de la variable.
Es un poco extraño, pero útil.
CÓDIGO LIMPIO
En general, la legibilidad es más importante que la limpieza o la brevedad.
isset( $var ) || $var = some_function();if ( ! isset( $var ) ) $var = some_function();
WordPress 3.x para desarrolladores: Introducción
0hace 11 años
Después de varias semanas buscando información sobre WordPress para un proyecto que tenía pendiente (ya acabado), he observado que hay cierta escasez de información sobre el desarrollo de WordPress, ya que la mayoría de tutoriales o manuales que rondan por internet están limitados a la creación básica de plugins o a lo más básico de la creación de plantillas.
Por ello voy a realizar un tutorial que, basandome en el tema Twenty Eleven de WordPress permita conocer el funcionamiento de los temas y las plantillas. Para desarrollar la parte de los plugins se creará uno de ejemplo.
Muchos ejemplos de código serán de la documentación principal de WordPress y es la que deberías consultar más habitualmente si vas a desarrollar para WordPress: http://codex.wordpress.org/Main_Page
Durante las próximas semanas publicaré un tema por semana hasta que se complete el tutorial.
Chicle de Melón
Una lástima que este plugin ya no exista, hay algunos que son parecidos pero no funcionan igual.
hace 2 semanas
Mr.Drean
Básico, pero sirve para los principiantes.
hace 3 años
Vicky
En Windows 10 no funciona, o la fórmula que poneis es errónea.
hace 4 años
marisa
como puedo entrar a modificar un archivo en ms dos
hace 4 años
Crear un tunel por SSH por consola (GNU/Linux) | Blog de Mario Javier
[…] Fuente: de https://www.interadictos.es/2014/01/20/crear-un-tunel-por-ssh-por-consola-gnulinux/ […]
hace 6 años
