Hay veces que por necesidad, llamémoslo manía, por no desmontar nuestra antigua web estática, o sencillamente porque acostumbráis a tener páginas estáticas como páginas iniciales como es mi caso. Donde nuestra intención sería poder añadir un widget de entradas recientes de wordpress en un sidebar o footer de una página web estática realizada en php o html.
Integrar un Widget de Entradas Recientes de WordPress en Webs Estáticas mediante una conexión directa a la base datos de nuestro blog en wordpress sin utiizar los recursos que wordpress ofrece.
1.- Establecemos los estilos del widget por el cual podemos adaptarlo al mismo diseño web que ya tengamos mediante el archivo style-widget.css dentro de los tags <head></head> por el que podremos editar mediante un editor de texto gratuito como notepad++.
1 2 3 4 5 | <!-- Copia y pega este código dentro de los tags <head></head> --> <!-- Fuente de iconos --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <!-- Hoja de estilos widget --> <link rel="stylesheet" href="css/style-widget.css"> |
2.- Insertaremos el código de a contuniación dentro de los tags <body></body> y lugar donde querais mostrar el widget.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <?php $blog_url = 'http://www.urldemiblog.com'; //INDICA URL DE TU BLOG $db_prefix = 'wp_'; //PREFIJO WORDPRESS COMUN wp_ $db_name = 'nombre base de datos'; //NOMBRE DE LA BASE DE DATOS $db_user = 'nombre usuario base de datos'; //USUARIO BASE DE DATOS $db_host = 'localhost'; //IP O LOCALHOST $db_pass = 'contraseña base de datos'; //CONTRASEÑA DE LA BASE DE DATOS $limite = 6; //LIMITE DE ENTRADAS A MOSTRAR EN EL WIDGET ?> <h4 class="heading-primary">Entradas <span>Recientes</span></h4> <ul class="simple-post-list"> <?php // WIDGET POST RECIENTES $conexion = mysql_connect($db_host, $db_user, $db_pass); if(! $conexion ) { die('Error conexion base de datos: ' . mysql_error()); } mysql_select_db($db_name); mysql_query ("SET NAMES 'utf8'"); $query = "SELECT * FROM ".$db_prefix."posts WHERE (".$db_prefix."posts.post_status='publish' AND ".$db_prefix."posts.post_type='post') ORDER by id DESC LIMIT 0,".$limite.""; $rs_result = mysql_query($query) or die(mysql_error()); while ($row = mysql_fetch_assoc($rs_result)) { $id=$row["ID"]; $query2 = "SELECT * FROM ".$db_prefix."posts WHERE (post_parent='$id' AND post_type='attachment') "; $rs_result2 = mysql_query($query2) or die(mysql_error()); if ($row2 = mysql_fetch_assoc($rs_result2)) { $imagen=$row2['guid']; } ?> <li> <div class="post-image"> <div class="img-thumbnail"> <a href="<?=$blog_url?>/<? echo $row["post_name"]; ?>/"> <img alt="<? echo $row["post_title"]; ?>" width="60" height="60" class="img-responsive" src="<?=$imagen?>"> </a> </div> </div> <div class="post-info"> <a href="<?=$blog_url?>/<? echo $row["post_name"]; ?>/"><? echo $row["post_title"]; ?></a> <div class="post-meta"> <? $fecha=$row["post_date"]; $dia=substr($fecha,8,2); $mes=substr($fecha,5,2); $ano=substr($fecha,0,4); $fecha=$dia."/".$mes."/".$ano; ?> <i class="fa fa-calendar"></i> <? echo $fecha;?> </div> </div> </li> <div style="margin:20px;"></div> <hr> <? } mysql_close($conexion); ?> </ul> |
[download id=»80596″]
¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
