En este post nos dedicaremos a crear la parte gráfica de nuestro blog, han visto que la mayoría de los temas para blogs están en PHP especialmente WordPress.
Bueno entonces no quise dejar de lado esa gran oportunidad, y poder tener nuestros blogs con los mismos diseños.
Para esto vamos a cualquier página que nos brinde temas de WordPress, hay muchos, un ejemplo es:
http://silentbits.com/categories/wordpress/wordpress-themes/
a) Ya que hemos bajado el tema de WordPress que más nos haya gustado, descomprimimos la carpeta y vamos a poder observar que tenemos algunos archivos PHP como son:
Comments,Footer, Functions, header, Index, links,page, search, sidebar, singles, style
Aquí lo que nos servirá son el Index, header, footer, sidebar para nuestro primer diseño.
b) El segundo paso es utilizar un editor de HTML, les recomiendo EXPRESSION WEB 2 o si gustan DREAMWEAVER también lo pueden utilizar.
1.- Abrimos el archivo header.php de la carpeta del tema de WordPress que descargamos.
Veremos que el archivo tiene la parte del header, y la mitad body, y muchas etiquetas de PHP regidas por su nomenclatura <?php ?> entonces, vamos a retirar todas esas etiquetas con el cuidado de no cortar o quitar la terminación de los demás tags o divs si los hay.
2.- Terminando de hacer eso, nos vamos con el Index.php y volvemos a retirar las etiquetas PHP y al termino de ello, copiamos todo el contenido HTML del index.php y lo juntamos con el contenido del header.
3.- El mismo proceso con el sidebar.php, y juntamos el contenido al final del index.php
4.- Después al final colocamos el footer.php y conjuntamos todo los anteriores.
El resultado una página web HTML sin estilo
, ahora copiamos ese código dentro de una página maestra y enlazamos las imágenes si es que las hay y los estilos, que en este caso se trata de STYLE.CSS
1.- Agregamos una master.Page (Plantilla Principal)

Un ejemplo puede ser este:
Usted puede agregar un contentPlaceHolder en la parte de contenido.
Agregue los siguientes controles
<asp:Literal ID="Literal" runat="server" />
<asp:Repeater ID="Repetidor" runat="server">
<ItemTemplate>
<h3>
<a href="Posts/<%# Eval("PostID") %>.aspx"><%# Eval("Titulo") %></a>
</h3>
<p class=""><%# Eval("Descripcion") %></p>
<p class=""><%# TimeAdjust.GetAdjustedTime((DateTime)Eval("Fecha")).ToString("F") %> | Comentarios: <%# Eval("Comentarios") %> | <a href="Posts/<%# Eval("PostID") %>.aspx">Leer más...</a></p>
</ItemTemplate>
<SeparatorTemplate><hr/></SeparatorTemplate>
</asp:Repeater>
Damos doble click en el formulario y en el evento Page_Load.
Simplemente ligamos el DataSource y colocamos los 10 posts nuevos.
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["filter"] == null)
{
Repetidor.DataSource = Post.Obtener10();
Repetidor.DataBind();
Literal.Visible = false;
}
else
{
Categoria c = new Categoria(Convert.ToInt32(Request.QueryString["filter"]));
Repetidor.DataSource = Post.Obtener10(c.CategoriaID);
Repetidor.DataBind();
Literal.Text = "Mostrando las noticias de la categoría \"" + c.Nombre + "\" . <a href=\"Default.aspx\">Mostrar todas</a>";
}
}
Checamos agregamos un post en la parte de Administrador. y vemos si realmente se ve en nuestra página principal del blog.
Nos vemos en el siguiente post!!
Recent Comments