WordPress Principiante a Master, Parte 1

A lo largo de esta serie de seis partes para principiantes a maestros, usaremos las funciones avanzadas de WordPress para crear nuestro propio portafolio y blog, completo con una página de opciones, múltiples estilos y soporte para las nuevas funciones de WordPress 2.7.

En el primer día, manejamos las secciones de preparación y administración al crear nuestra página de Opciones.

También disponible en esta serie:

WordPress: Principiante a Master, Parte 1
WordPress: Principiante a Master, Parte 2
WordPress: Principiante a Master, Parte 3
WordPress: Principiante a Master, Parte 4
WordPress: Principiante a Master, Parte 5
WordPress: Principiante a Master, Parte 6

Visión general

Al final de esta serie, habremos creado Innovación - una plantilla de WordPress de calidad premium perfecta para mostrar un portafolio y alojar un blog; Completa con las siguientes características:

Página de opciones para manejar la naturaleza avanzada de la plantilla, sin tener que editar ningún archivo manualmente.
3 esquemas de color incorporados - con fácil cambio entre ellos.
Plantillas de página de inicio y cartera, con un pie de página listo para widgets y barra lateral.
Compatibilidad con WordPress 2.5+.
Soporte de comentarios por subprocesos y paginados para WordPress 2.7.
Un widget personalizado para mostrar tus últimas publicaciones, con una imagen de vista previa, en tu página de inicio.

El tema incluirá tres estilos integrados, DeepBlue, RedSpace y SoftLight, pero podrá agregar fácilmente sus propias combinaciones de colores:

El plan para cada día:

Página de opciones de preparación y administración.
Diseño de página de inicio. Creación de un bucle personalizado de WordPress. Usando áreas de widgets. Pie de página.
Blog de publicaciones en bucle. Barra lateral Diseño único de blog.
Página de cartera. Separación de páginas 'individuales' dependiendo de la categoría. Página de cartera única.
Diseño de comentarios. Archivo. Buscar.
Lifting facial - el esquema de color alternativo 'RedSpace'. Creando un widget personalizado.

¿Qué experiencia previa necesito??
La experiencia con xHTML y CSS es imprescindible (ya que no voy a revisar gran parte de este código en detalle).
También sería muy útil tener una comprensión básica de PHP (como el uso de variables, matrices, sentencias condicionales y 'foreach' y 'while' loops. Echa un vistazo a la excelente serie de screencast "Diving into PHP" de Jeffrey.

Tener un poco de conocimiento de WordPress (¡incluso conocer el modo en que se utiliza el Dashboard!) Definitivamente mejorará su experiencia. Echa un vistazo a la serie de screencast "WordPress for Designers" de Drew.

Saltar a una sección

Empezando
- Preparando archivos
- Categorías y Páginas
- Hacer WordPress un CMS
Página de opciones
- Categorías desplegables
- Páginas desplegables
- Hoja de estilos desplegable
- La matriz de opciones
- Opciones back-end
Recuperando las Opciones
Resumen

Empezando

Hoy, manejaremos el código de back-end central en el que se basará el resto del tema. Primero necesitará una nueva instalación de WordPress, preferiblemente la última versión (2.7 en el momento de la escritura); sin embargo, la plantilla funcionará con cualquier versión por encima de 2.5. Dentro de / wp-content / themes / carpeta, crear nuevas carpetas y archivos con la siguiente estructura:

/innovación/
- / estilos /
  - /azul profundo/
  - deepblue.css
- funciones.php
- index.php
- page.php
- page-home.php
- page-portfolio.php
- style.css
- var.php

funciones.php contendrá código para nuestra página de opciones y widgets entre otras cosas.
index.php se utiliza para mostrar los últimos mensajes.
page.php será la plantilla utilizada para la mayoría de las páginas individuales.
page-home.php será nuestra plantilla de portada.
page-portfolio.php Será nuestra página de portafolio..
var.php Se utilizará para recuperar nuestras opciones de la base de datos..
style.css contendrá la mayor parte de nuestro estilo.
/styles/deepblue.css Contendrá el estilo de nuestro primer esquema de color..

Estos no son todos los archivos que necesitaremos. Crearemos los demás a medida que avanzamos para que pueda comprender para qué sirve cada uno..

Preparando archivos

Los dos página- Los archivos son plantillas de página personalizadas, por lo que podemos distribuir el contenido de manera diferente en las páginas asignadas a estas plantillas. Para que WordPress los reconozca, por dentro. page-home.php introduzca la siguiente:

Del mismo modo, dentro de page-portfolio.php entrar:

El nombre de la plantilla es el nombre utilizado por WordPress al seleccionar una plantilla de página. get_header (); Es una función de WordPress para cargar el header.php archivo (que crearemos más adelante).

Y añada lo siguiente a page.php. No necesitamos dar a este archivo un nombre de plantilla, ya que es la plantilla predeterminada.

También debemos asignar algunos detalles como el nombre, la descripción y el autor de nuestro tema. Esto se hace en un bloque de comentarios en la parte superior de style.css:

 / * Nombre del tema: Innovación URI del tema: http://www.danharper.me/innovation Descripción: Cartera avanzada y tema de blog creado por Dan Harper como parte de una serie de tutoriales para NETTUTS.com Versión: 1.0 Autor: Dan Harper Autor URI: http://www.danharper.me * /

Categorías y Páginas

Para ahorrar tiempo más tarde, crearemos las categorías y páginas relevantes que necesitaremos ahora. En su panel de WordPress, active el tema (utilizará el nombre que definimos anteriormente en el CSS) - no se preocupe de que el tema esté vacío, nos moveremos a eso más adelante.

Ahora crea tres nuevos Páginas. Uno llamado 'Inicio', y el otro 'Portafolio'. Seleccione la Plantilla de página para cada uno de ellos como 'Página de inicio' y 'Portafolio' respectivamente. Nombre la página final 'Blog' y use la plantilla de página predeterminada.

También crea una nueva categoría llamada 'Cartera'. Esto es lo que usaremos para publicar artículos de cartera en.

Hacer WordPress un CMS

Desde su panel de control, vaya a Configuración -> Lectura. Para "Visualización de la página frontal", establezca la página de inicio en la página de "Inicio" que creó y la página de Publicaciones en "Blog":

Página de opciones

Probablemente esto parezca un poco hacia atrás, pero vamos a crear una página de opciones para nuestro tema antes de realizar cualquier trabajo en el front-end real. Esto se debe a que todo el tema depende de las opciones en la página, y no tendría sentido hacer esas otras partes primero.

Para aquellos que no lo saben, la página de opciones es una página adicional en el Panel de WordPress que estamos agregando, que contiene una serie de opciones para nuestro tema. Estos son:

Esquema de color
Categoría de cartera
Página del blog
Código de Google Analytics

Dentro funciones.php Comience con lo siguiente. los $ nombre del tema variable define el nombre del tema que se utilizará para el título de la página en el Panel de control (Innovación). Y $ nombre corto se utiliza para hacer que nuestras opciones sean únicas: si cambia esto, tendrá que cambiar varias instancias a lo largo del código (así que no lo cambie;)).

  Categorías desplegables
 A continuación, crearemos el código que nos permite usar todas las categorías en la opción desplegable 'Cartera':
  / * Obtener categorías en una lista desplegable * / $ categories_list = get_categories ('hide_empty = 0 & orderby = name'); $ getcat = array (); foreach ($ categories_list as $ acategory) $ getcat [$ acategory-> cat_ID] = $ acategory-> cat_name;  $ category_dropdown = array_unshift ($ getcat, "Choose a category:");
 Este código utiliza WordPress ' get_categories (); función para recuperar una lista de todos los nombres de categorías, y usando una para cada(); bucle para agregar cada nombre e ID en una matriz llamada $ getcat para su uso posterior en el código. Finalmente, utilizamos array_unshift para insertar "Elija una categoría:" en la parte superior de la matriz.
 Páginas desplegables
 La siguiente es otra opción desplegable similar que selecciona un nombre de página. El código para esto es muy similar al anterior:
  / * Obtener páginas en una lista desplegable * / $ pages_list = get_pages (); $ getpag = array (); foreach ($ pages_list as $ apage) $ getpag [$ apage-> ID] = $ apage-> post_title;  $ page_dropdown = array_unshift ($ getpag, "Seleccione una página:");
 Como obtener las categorías, estamos usando WordPress ' get_pages (); función para obtener una lista de todos los nombres de página, y el resultado se coloca en el $ getpag matriz para su uso posterior.
 Hoja de estilo desplegable
 También hay una opción desplegable para seleccionar una hoja de estilo. Este código es un poco más complicado:
  / * Obtener hojas de estilo en una lista desplegable * / $ styles = array (); if (is_dir (TEMPLATEPATH. "/ styles /")) if ($ open_dirs = opendir (TEMPLATEPATH. "/ styles /")) while (($ style = readdir ($ open_dirs))! == false) if (stristr ($ style, ".css")! == false) $ styles [] = $ style;  $ style_dropdown = array_unshift ($ styles, "Elija un esquema de color:");
 El código anterior utiliza el PHP opendir (); función, seguido de readdir (); para abrir nuestro / estilos / carpeta y obtener una lista de todos los archivos allí.
 Entonces usamos stristr (); para limitar la lista sólo a la .css archivos (para evitar que las carpetas salgan también), y los resultados se pasan a la $ estilos formación.
 La matriz de opciones
 Todas nuestras opciones se almacenarán en sus propios arreglos para que podamos procesarlos en masa más adelante en el código:
  / * Las opciones * / $ options = array (array ("name" => "General", "type" => "title"), array ("type" => "open"), array ("name" = > "Esquema de color", "desc" => "¿Qué esquema de color te gustaría?", "Id" => $ shortname. "_ Esquema de colores", "tipo" => "seleccionar", "std" => "Elige un combinación de colores: "," opciones "=> $ estilos), matriz (" nombre "=>" Categoría de cartera "," desc "=>" Seleccione la categoría en la que se publicarán los elementos de la cartera. "," id "=> $ shortname. "_ portfolio_cat", "type" => "select", "std" => "Choose a category:", "options" => $ getcat), array ("name" => "Blog page", "desc "=>" Seleccione la página utilizada como página de blog (publicaciones). "," Id "=> $ shortname." _ Blogpage "," escriba "=>" seleccione "," std "=>" Seleccione una página: " , "opciones" => $ getpag), matriz ("nombre" => "Google Analytics", "desc" => "Inserte aquí su código de Google Analytics (u otro).", "id" => $ shortname. " _analytics_code "," type "=>" textarea "), array (" type "=>" close "));
 Cada matriz es una opción, y contiene nombre, desc, carné de identidad y tipo parámetros La identificación es muy importante y es lo que usaremos para hacer referencia a la opción más adelante en el código. Por ejemplo, para obtener la categoría de cartera, verificamos la $ ts_portfolio_cat (ts es el nombre corto al que hacemos referencia en la parte superior del documento).
 Opciones back-end
 El siguiente código hace que nuestra página de opciones aparezca en el Tablero (está bajo "Diseño" en WordPress 2.6 o inferior), y guarda las opciones en la base de datos.
  
  function mytheme_add_admin () global $ themename, $ shortname, $ options; if ($ _GET ['page'] == basename (__ FILE__)) if ('save' == $ _REQUEST ['action']) foreach ($ options as $ value) update_option ($ value ['id' ], $ _REQUEST [$ value ['id']]);  foreach ($ opciones como $ valor) if (isset ($ _REQUEST [$ valor ['id']])) update_option ($ valor ['id'], $ _REQUEST [$ valor ['id']]) ;  else delete_option ($ value ['id']);  encabezado ("Ubicación: themes.php? page = functions.php & saved = true"); morir;  else if ('reset' == $ _REQUEST ['action']) foreach ($ options como $ value) delete_option ($ value ['id']);  header ("Location: themes.php? page = functions.php & reset = true"); morir;  if (! function_exists ('wp_list_comments')) add_theme_page ($ themename. "Opciones", $ themename, 'edit_themes', basename (__ FILE__), 'mytheme_admin');  else add_menu_page ($ themename. "Opciones", $ themename, 'edit_themes', basename (__ FILE__), 'mytheme_admin');  function mytheme_admin () global $ themename, $ shortname, $ options; if ($ _REQUEST ['guardado']) echo ''. $ nombre del tema'. Se guardó la configuración.
'; if ($ _REQUEST ['reset']) echo ''. $ nombre del tema'. reiniciar la configuracion.
'; ?>  
  ajustes
 
 No vamos a revisar el código, ya que este tutorial se desviaría demasiado. Simplemente cópielo y péguelo y piense en él como un código mágico de WordPress Gods que hace que su tema funcione..
 Este código siguiente comprueba cada una de nuestras opciones para su tipo atributo, y los estilos en una tabla. Así que opciones con "tipo" => "seleccionar" saldría como un cuadro desplegable, o "type" => "textarea" saldría como un área de texto.
    

    
  
 
   "/>          <?php if ( get_settings( $value['id'] ) != "")  echo stripslashes(get_settings( $value['id'] ));  else  echo $value['std'];  ?>                      />            
      
 
  Finalmente, al final del archivo, inserte:
  require (TEMPLATEPATH. "/var.php");
 Nosotros exigir() nuestro var.php Archivo que contendrá código para recuperar nuestras opciones..
Tenga en cuenta que tenemos que usar TEMPLATEPATH en exigir() o incluir() etiquetas para que esté navegando a nuestro directorio de temas, y no al directorio raíz de WordPress.
 Recuperar estas opciones
 Ahora que esas opciones están en el Tablero, necesitamos poder usarlas en nuestro tema. Inserte el siguiente código en var.php:
  get_var ("SELECCIONE term_id FROM $ wpdb-> términos". "DONDE nombre =" $ ts_portfolio_cat ""); / * Obtenga el ID de la página del blog del nombre * / $ ts_blogpage = $ wpdb-> get_var ("SELECCIONE 'ID' DE $ wpdb-> posts". "DONDE post_title =" $ ts_blogpage "Y post_type =" página "LIMIT 1" ); ?>
 La primera sección del código recupera todas nuestras opciones de la base de datos. Sin embargo, tenemos un problema: nuestras opciones de Categoría y Página envían de vuelta el nombre de la categoría o página, pero preferiríamos la ID ya que es más fácil de usar en las funciones de WordPress.
 Las siguientes dos partes del código hacen exactamente eso. Ejecutamos una consulta SQL para obtener el ID apropiado. Estas opciones ahora están almacenadas en el $ ts_portfolio_cat y $ ts_blogpage variables.
 Ahora que hemos terminado el lado del administrador, inicie sesión en su Panel de control y establezca la configuración adecuada para cada una de las opciones. Escoger deepblue.css por el esquema de color por ahora.
  
 Resumen
 Con esto concluye el día 1 de WordPress Week. Mañana, estaremos creando el diseño de nuestra página de inicio, creando un 'Bucle de WordPress' personalizado y manejando áreas de widgets.
 Parte 2 - Bucles y widgets.



		
			
	   
	




Código