Accentsconagua

WordPress Principiante a Master, Parte 3

Código
Share

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. Hoy diseñaremos nuestras publicaciones de blog y diseñaremos 'publicaciones individuales' basadas en la categoría.

Hoy vamos a enfocarnos en la parte del tema del blog. Estaremos codificando la vista principal del 'blog', creando la barra lateral y terminando con la vista de una sola publicación..

También disponible en esta serie:

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

Saltar a una sección

  • El blog
  •   - El bucle de WordPress
  •   - Estilo
  • Barra lateral
  •   - Registrar barra lateral
  •   - Mostrar la barra lateral
  •   - Estilo de la barra lateral
  •   - Color de la barra lateral
  • Visualización de una sola publicación
  •   - Compruebe la categoría de publicación
  •   - Disposición única de blog
  • Resumen

El blog

El código para la vista principal del blog estará dentro. index.php. Esta es la página que mostrará todas las publicaciones de nuestro blog, con enlaces a su vista principal / única donde normalmente continuará la publicación y permitirá a los usuarios comentar..

A continuación se muestra una vista previa de cómo se verá el diseño de todas las secciones del blog, con la barra lateral a la derecha:


Empecemos. En index.php Ingrese el siguiente código. Comenzamos por incluir nuestra página de cabecera, y luego creamos nuestra div # mainarea que, como se puede ver en la primera imagen, contendrá las publicaciones del blog (con la barra lateral a la derecha).

Agregue lo siguiente a style.css para establecer #área principal con los estilos correctos:

 #mainarea float: left; derecho de relleno: 30px; ancho: 690px;

El bucle de WordPress

A continuación, comenzaremos un bucle de WordPress con algunos criterios personalizados:

La primera línea nos permite usar la paginación en el bucle de WordPress, es decir. indicando al bucle que solo incluya x publicaciones, y luego muestre un enlace de 'Publicaciones más recientes' al siguiente lote. El código verifica si la página actual está solicitando una determinada página de paginación, si no muestra la primera.

Dentro query_posts () Especificamos utilizar la paginación; y también le dice al bucle que excluya las publicaciones de nuestra categoría de Portafolio (observe el símbolo menos).

El siguiente es el código dentro del bucle. Como se mencionó en el Día 2, cualquier cosa en el ciclo se ejecutará para cada publicación disponible.


 
 
 "title =" Continue Reading """> 
 
     
    •  
  • #comentarios "> 
    •  
    •

Comenzamos por incluir cada publicación dentro de su propia div. Usamos La identificación() para dar a cada div una ID única (en caso de que alguna vez necesite diseñar una publicación específica de manera diferente); y también hemos dado a cada uno una clase de entrada en el blog para que sea estilo.

A continuación se publica el título de la publicación usando el título() y the_permalink () Se utiliza para incluir el enlace al post completo..

Dentro ul.meta Es alguna información extra para el post.. la categoría() se utiliza para dar salida a los nombres de las categorías a las que se asigna la publicación (separados por una coma).

A continuación, enlazamos a los comentarios para la publicación, de nuevo utilizando the_permalink (), y comments_number () Se utiliza para dar salida al número de comentarios para la publicación..

el tiempo() proporciona la fecha en que se publicó la publicación. F jS es un código de fecha PHP para 'Nombre del mes' (J); 'Fecha' (j) y el sufijo de la fecha (es decir, 'st', 'nd', 'rd' o 'th') (S).
Por ejemplo, esto daría como resultado el 31 de enero. También podrías añadir Y Al final para dar salida al año. Para más información, vea el manual de PHP: date ().

Finalmente, el contenido del cuerpo real para la publicación se emite usando el contenido(). Un enlace 'Leer más' se agregará automáticamente a la publicación si es necesario.

A continuación, cerramos el Loop con al final, e incluya los botones de Paginación para recorrer las publicaciones más antiguas / nuevas (que es donde nuestro $ paginado el código es útil) usando el next_posts_link () y previous_posts_link () funciones:

También hemos incluido nuestro barra lateral.php y footer.php archivos.

Estilo

Vista previa de la página del blog en su navegador. Ya he agregado en una publicación adicional con algunos datos de ejemplo. La imagen de abajo resalta lo que necesitamos cambiar:


Tirar lo siguiente en style.css. Añadimos cierta separación entre cada entrada de blog (.entrada en el blog), y establece el ul.meta artículos para mostrar en línea. los .alinear a la izquierda, .alinear y .Alinear al centro las clases también se establecen - estas clases son utilizadas por WordPress para alinear imágenes, y también se usan en nuestra paginación.

 .blogpost claro: ambos; margen inferior: 45px; parte inferior de relleno: 40px; desbordamiento: oculto;  .singleblog desbordamiento: oculto; ul.meta margen: 0 0 25px 0;  ul.meta li display: inline; Familia tipográfica: Verdana, Arial, Helvetica, sans-serif; tamaño de letra: 0.7em; línea de altura: 1.3em; margen derecho: 10px; relleno-izquierda: 12px; transformación de texto: mayúsculas;  ul.meta li: primer hijo borde: ninguno; relleno-izquierda: 0;  .alignleft float: left; margen: 0 10px 8px 0;  .alignright float: right; margen: 0 0 8px 10px;  .aligncenter margen: 10px auto;

En deepblue.css agregue un borde fino y claro entre cada publicación de blog, un borde para separar cada elemento de la lista de metadatos y establezca el H2 en # 333:

 .blogpost, .worksearch border-bottom: 1px solid # e8e3c8;  h2 a: enlace, h2 a: visitó color: # 333;  ul.meta li borde izquierdo: 1px sólido # e3e8ed;

Barra lateral

La barra lateral tendrá el siguiente aspecto y se usará en todo el sitio, excepto en las páginas de portada y portada:


Registrar barra lateral

En primer lugar, debemos registrar el área del widget de la barra lateral, esto se hace de la misma manera que el área en la página de inicio. Dentro funciones.php y el siguiente código dentro de los corchetes para if (function_exists ('register_sidebar')) después de la matriz de la página de inicio:

 register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
  • ',' after_widget '=>'
    • ',' before_title '=>'
    ',' after_title '=>'
    ',));

    En otras palabras, debe verse como sigue:

     if (function_exists ('register_sidebar')) register_sidebar (array ('name' => 'Homepage Bottom', 'before_widget' => '
    ',' after_widget '=>'
    ',' before_title '=>'
    ',' after_title '=>'
    ',)); register_sidebar (array ('name' => 'Sidebar', 'before_widget' => '
  • ',' after_widget '=>'
    • ',' before_title '=>'
    ',' after_title '=>'
    ',));

    Mostrar la barra lateral

    A continuación, renderice la barra lateral agregando lo siguiente a barra lateral.php:

    Y asegúrate de que la barra lateral se adhiera a la derecha de la página fijando el ancho en style.css:

     #sidebar float: left; ancho: 220px;  #sidebar ul margen: 0;  #sidebar ul li estilo de lista: ninguno; margen izquierdo: 0; margen inferior: 25px;

    Desde su panel de control, agregue algunos widgets a la opción 'Barra lateral' y obtenga una vista previa:



    Estilo de la barra lateral

    Agrega los siguientes estilos en style.css para crear una estructura para cada widget de barra lateral:

     li h3 font-size: 1.3em; altura de la línea: 1.4em; margen: 5px 0 5px 0;  / * Formulario de búsqueda de la barra lateral * / #sidebar ul li # search margin-bottom: 25px;  .hidden mostrar: ninguno; #sidebar ul li # search form #s padding: 7px 29px 7px 7px; ancho: 182px;  #sidebar ul li # formulario de búsqueda #searchsubmit pantalla: ninguno;  / * Listas de la barra lateral (por ejemplo, Meta, Archivos, Categorías) * / #sidebar ul li ul padding: 15px 5px 15px 8px;  #sidebar ul li ul li list-style-position: outside; margen: 0 0 5px 20px;

    Color de la barra lateral

    Guarda las dos imágenes de abajo como bullet.gif y search.png en tus / styles / deepblue / carpeta (Las imágenes de abajo han sido redimensionadas, pero serán correctas cuando se guarden):

    Agregue lo siguiente a deepblue.css. Utilizamos las dos imágenes en sus elementos respectivos, y establecemos colores de fondo y borde para los elementos del widget.

     #sidebar ul li # formulario de búsqueda #s fondo: url ("deepblue / search.png") sin repetición derecha # f6f6ec; borde: 1px sólido # E8E3C8;  #sidebar ul li # formulario de búsqueda #s: focus border: 1px solid # dad4b6;  #sidebar ul li ul background-color: # f6f6ec; borde: 1px sólido # E8E3C8;  #sidebar ul li ul li estilo de lista: url ("deepblue / bullet.gif");  #sidebar ul li a: link, #sidebar ul li a: visitó color: # 333;

    Visualización de una sola publicación

    WordPress utiliza el single.php archivo para mostrar una sola publicación - es decir. la publicación completa, donde los visitantes pueden publicar comentarios, etc. Sin embargo, dado que existen dos tipos diferentes de publicaciones: los elementos del Portafolio y las publicaciones del Blog, ambos requieren su propio diseño en la página de la publicación única, por lo que necesitamos diferenciar entre ellos.

    Ver categoría de mensaje

    Crear un single.php Archivo y añadir el siguiente código:

     enviar; if (in_category ("$ ts_portfolio_cat")) / * Es un elemento de la cartera * / require ('single-portfolio.php');  else / * Es una publicación de blog * / require ('single-blog.php'); ?>

    Utilizamos WordPress ' en_categoria () función para verificar si la publicación a mostrar está asignada a la categoría de cartera. Si es así, requerimos la single-portfolio.php expediente.
    Si no está en la categoría de Cartera, entonces single-blog.php es usado.

    Hoy solo crearemos la single-blog.php expediente. La página de cartera única se creará en la siguiente parte de la serie..

    Disposición única de blog

      
      
     
     
       
      •  
    • #comentarios "> 
      •  
      •

    Notará que es muy similar al código que usamos en index.php, pero con algunas excepciones:

    1. Estamos usando if (have_posts ()) en lugar de query_posts (). Este es el bucle de WordPress por defecto.
    2. Hemos incluido el área de comentarios usando comments_template ().

    En tu blog, haz clic en una publicación y deberás acceder a la página de publicación única. También puede ver que el área de comentarios predeterminada se ha incluido automáticamente ya que aún no hemos creado el nuestro..
    Crearemos una plantilla de comentarios personalizada en la parte cinco..

    Resumen

    Vuelve mañana cuando estemos creando nuestras páginas de cartera. (Parte 4)

    Código
    ×