Todas las entradas de: Eduardo Revilla Vaquero

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 2

Hola a todos, hoy vamos a continuar con el  tutorial de iniciación a Git, en el post anterior vimos como instalar Git, como crear un repositorio local, como añadir archivos al stage, como confirmar los cambios haciendo un commit y como volver a un estado anterior.

Vamos a seguir aprendiendo a utilizar git:

Obtener información sobre un comando: git help

Con git help obtenemos información sobre un comando por ejemplo si queremos obtener información sobre el comando commit escribimos lo siguiente:

git help commit

Al escribir este comando se abrirá en nuestro navegador un documento con la documentación sobre el comando que queremos consultar:

Mostrar diferencias  entre los últimos cambios del archivo sin confirmar y la última versión del archivo que hicimos commit: git diff

Vamos a volver a editar nuestro archivo holamundo.html y vamos a realizar algún cambio, por ejemplo vamos volver a poner “Adiós mundo cruel…” en el h1 y a añadir una etiqueta h2 quedando de esta manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Adios mundo cruel...</h1>
        <h2>Era broma... ¡¡¡mucho mejor hola mundo!!!</h2>
    </body>
</html>

 

Ahora si ejecutamos el comando git status veremos que nos indica que se ha modificado el archivo holamundo.html.

Si ejecutamos git diff nos muestra la diferencia del archivo actual con el contenido de ese archivo en el último commit que hemos realizado:

Añadir un único archivo

En el post anterior vimos que con git add .  añadíamos todos los archivos que habíamos modificado o se habían creado nuevos al stage a la espera de hacer un commit para confirmar el paso definitivo al repositorio, sin embargo podemos indicar a Git que pase al stage solo cierto tipo de archivos:

Si solo queremos añadir un único archivo para hacer commit en lugar de git add . utilizamos git add nombre_archivo

Por ejemplo vamos a crear un archivo nuevo en nuestro proyecto llamado holamundo.js, de momento lo dejamos en blanco, para probar nos es suficiente, y también vamos a crear otro archivo que vamos a llamar holamundo.css, de momento lo dejamos en blanco también, en este momento en la carpeta de nuestro proyecto tendremos los siguiente archivos:

Si realizamos un git status nos indicara que holamundo.html  tiene cambios  y que holamundo.css y holamundo.js no estan siendo controlados pos Git todavía.

Con git add . pasaríamos todos los archivos al stage, pero si solo queremos pasar los cambios que hemos hecho en holamundo.html  utilizaremos el siguiente comando:

git add holamundo.html

Si ahora utilizamos el comando git status veremos que holamundo.html aparece en verde y esta listo para hacer un commit, sin embargo holamundo.js y holamundo.css siguen pendientes de ser pasados al stage:

Añadir al stage una carpeta

Para añadir al stage una carpeta simplemente utilizamos git add nombre_carpeta/

Por ejemplo vamos a crear una carpeta llamada assets en nuestro proyecto:

Si ejecutamos el comando git status vemos que no aparece la  nueva carpeta que hemos creado, esto es porque git ignora las carpetas vacías, si dentro creamos un archivo que se llame por ejemplo datos.txt y después volvemos a ejecutar git status veremos que ahora si muestra la carpeta assets:

Bien, ahora mismos tenemos pendientes de pasar al stage la carpeta assets y los archivos holamundo.css y holamundo.js.

Si solo queremos pasar la carpeta assets ejecutaremos el siguiente comando:

git add assets

Añadir al stage los archivos que tengan una cierta extensión

Si solo quieres confirmar los archivos que tengan una cierta extensión por ejemplo todos los .css podemos utilizar el asterisco  “*” como comodín de la siguiente manera: 

git add *.css

En este momento falta por pasar al stage holamundo.js y el resto esta pendiente de hacer un commit para confirmar el paso:

Quitar archivos que hemos añadido al stage:

Si hemos añadido un archivo (o varios) al stage se puede indicar que se retiren del stage con git reset nombre_del_archivo.

Por ejemplo, vamos a retirar del stage el archivo holamundo.css:

git reset holamundo.css

Si ahora volvemos a ejecutar git status vemos que holamundo.css ya no esta en el stage y ahora esta pendiente de ser añadido:

Al igual que con git add, con el comando git reset también podemos indicarle carpetas o la extensión del archivo/archivos que deseamos retirar del stage.

Agregar todos los archivos al stage

Para agregar todos los archivos al stage podemos utilizar git add .,  git add -A o también git add –all

Por ejemplo si queremos añadir todos los archivos que tenemos ahora pendientes podemos escribir el siguiente comando:

git add -A

Al volver a realizar un git status podemos ver que se han añadido todos al stage y están listos para hacer un commit:

Ver el histórico de todos los commit que hemos hecho: git log

Vamos a realizar un commit de los  archivos que tenemos ahora mismo en el stage, para ello escribimos como ya sabemos el comando git commit y le ponemos un mensaje para explicar los cambios que se han hecho.

git commit -m "Hemos realizado cambios en datos.txt, holamundo.css, holamundo.html, y holamundo.js"

Con git log vemos el histórico de todos los commit que hemos hecho, te los muestra en orden inverso, es decir el último commit aparece primero.

De momento tenemos solo dos commits así que nos los mostrará todos de una vez:

Si tenemos muchos commits y no caben todos en la pantalla te muestra solo los últimos y si pulsamos  la tecla enter vamos viendo los commits anteriores, cuando llegamos al primero pone (end). Para salir antes de llegar al primero tenemos que pulsar la letra Q.

Alias

Podemos crear alias para los comandos para acortarlos.

Por ejemplo podemos hacer que en lugar de escribir git status podamos escribir git s de la siguiente manera:

git config --global alias.s "status"

Recuerda que con –global le decimos que se aplique a todos los repositorios git que tengamos.

Ahora si escribimos git s obtendremos el mismo resultado que con git status.

Renombrar un archivo: git mv

Podemos renombrar un archivo directamente desde el navegador de archivos o desde nuestro editor de código, sin embargo está bien conocer que también podemos renombrar un archivo con el comando git mv.

Vamos a renombrar el archivo holamundo.js y lo vamos a llamar adiosmundo.js:

git mv holamundo.js adiosmundo.js

Podemos observar en la carpeta de nuestro proyecto que el archivo ha cambiado de nombre:

Si ejecutamos git status obtenemos lo siguiente:

Para que el cambio se haga efectivo tenemos que ejecutar un commit:

git commit -m "Hemos renombrado el archivo holamundo.js para llamarlo adiosmundo.js"

Borrar un archivo: git rm

Para eliminar un archivo podemos utilizar el comando git rm.

Por ejemplo vamos a eliminar el archivo holamundo.css:

git rm holamundo.css

Con esto habrá desaparecido nuestro archivo.

Para hacer efectiva la eliminación volvemos a hacer un commit.

git commit -m "Hemos eliminado holamundo.css"

Todo esto está muy bien, pero ¿que pasa si nos arrepentimos de de haber eliminado el archivo?

No te preocupes, en el siguiente punto vamos a ver como volver a un estado anterior.

Volver a un estado anterior: git reset

Si ejecutamos git log vemos que después de cada commit viene un id o identificativo con una serie de números y letras, algo parecido a esto:

commit 27b6e605decfd194e4f4ec627381156e9bbadf27

Este código nos sirve para identificar el commit.

Con git log –oneline vemos los comits de una forma simplificada, el código es más corto pero también nos vale para hacer un reset, podemos utilizar cualquiera de las dos formas.

Si por ejemplo hemos eliminado un archivo y queremos volver al punto anterior a eliminarlo buscamos en el log el código identificador del commit y utilizamos git reset –soft codigo_comit  o git reset –hard codigo_commit

Con –soft no recuperamos el archivo, solamente se sitúa en el stage en el momento en que eliminamos el archivo.

Con –hard volvemos al punto anterior a eliminar el archivo y el archivo vuelve a aparecer en el lugar en el que estaba antes de ser eliminado.

Por ejemplo vamos a recuperar el archivo holamundo.css que hemos eliminado situándonos en el commit anterior a borrarlo, esto sería en el commit donde hemos renombrado  holamundo.js como adiosmundo.js, copiamos el código identificador del commit  y escribimos:

git reset --hard 6cf7d1a76c51a2875e14d19ce1ecb78017b4fd94

Recuerda que tu tendrás que poner el código correspondiente al commit donde has renombrado el archivo que será diferente al que muestro.

Una vez realizado el reset podemos ver como por arte de magia ha vuelto a aparecer el archivo holamundo.css:

Al hacer un hard reset si posteriormente ejecutamos git log vemos que en el historial de cambios ya no aparece cuando borramos el archivo:

Si ejecutamos git reflog podemos ver el historial completo de cambios incluido aquellos que hayamos revertido con reset.

Por hoy lo vamos a dejar aquí, en el siguiente post seguiremos viendo conociendo más sobre git.

 

Tutorial de Git – Aprende Git y GitHub/GitLab de manera fácil, rápida y sencilla – Parte 1

Hola a todos, hoy os traigo un tutorial de iniciación a Git, donde vamos a aprender como empezar a utilizar Git y también GitHub y GitLab (Hay otros pero nosotros vamos a ver estás dos) intentando que la curva de aprendizaje sea lo más suave posible y tardes el menor tiempo posible en aprender.

 

Git

Introducción

Hoy en día para cualquier puesto de trabajo como desarrollador te van a pedir que sepas utilizar Git. Si eres freelance también es muy importante conocer Git para llevar el control de versiones de nuestros desarrollos.

¿Que es Git?

Git, es un sistema de control de versiones creado por Linus Torvalds, conocido por iniciar y mantener el desarrollo del kernel de Linux.
Al igual que Linux, Git es  software libre.

¿Que es un sistema de control de versiones?

Un sistema de control de versiones es una herramienta utilizada para gestionar ágilmente los cambios en el código fuente de los programas y poder revertirlos.
Su propósito es llevar registro de los cambios en archivos de computadora y coordinar el trabajo que varias personas realizan sobre archivos compartidos.

Es muy común si no utilizas un sistema de control de versiones el ir guardando las diferentes versiones de nuestros proyectos en carpetas diferentes tal vez con la fecha y hora  a modo de backup.

Esto puede ser válido para proyectos pequeños que no van a tener cambios importantes, pero a la larga resulta engorroso y es fácil cometer errores y sobrescribir carpetas por error… etc,  además es mucho más complicado cuando queremos volver a un estado concreto del proyecto.

Con un sistema de control de versiones si detectamos que un cambio que hemos realizado anteriormente está generando un error podemos revertir ese cambio y volver a un estado anterior. Además podemos crear ramas para probar cosas y si funcionan estos cambios como deseamos entonces volver a fusionarlas con la rama principal.

Veremos todo esto con ejemplos prácticos.

Existen otras herramientas para el control de versiones como Mercurial, CVS,  Subversion, etc, pero sin duda la mas popular a día de hoy es Git.

Instalando Git

Lo primero que necesitamos hacer es instalar Git en nuestra computadora.

Instalar Git en Windows

Vamos a https://git-scm.com/download y descargamos la versión para nuestro sistema operativo, en este caso Windows:

Descargar Git para Windows

Una vez descargado el instalador lo ejecutamos e instalamos Git seleccionando todos los valores por defecto,  ya sabes siguiente…siguiente…, no olvides que hay que leer lo que pone antes de darle a siguiente por si acaso ;-).

Al terminar le marcamos la casilla launch git bash para que nos abra el terminal de git.

Podemos utilizar git bash o el propio cmd del sistema.

Tambien se instala una aplicación llamada git GUI que nos ofrece una interface gráfica.

Cada vez que queramos abrir el terminal de git solo tenemos que ir al  menú de inicio de Windowa  y buscar Git, entre otras aplicaciones nos aparecerá Git Bash, esa es la consola de comandos de Git y es la que vamos a utilizar.

Una vez que hemos abierto  Git Bash, para comprobar que versión de Git tenemos instalada escribimos el siguiente comando:

git --version

Si todo esta instalado correctamente veremos algo como esto:

Instalar Git en Mac

Aunque existén varias formas de instalar git en mac, mismamente desde el terminal, para hacerlo sencillo y asegurarnos de que tenemos la ultima versión estable vamos a descargar el instalador de git para mac de su página oficial. Para ello visitamos  https://git-scm.com/download y descargamos la versión para Mac OS X:

Una vez descargado damos doble click sobre el archivo y nos mostrará el instalador, pinchamos con el botón derecho sobre el archivo .pkg y le decimos que lo abra con el instalador y le damos a instalar. Nos pedirá la contraseña de usuario para poder instalarlo.

Una vez instalado desde el terminal escribimos git –version para comprobar la versión instalada.

Instalar Git en Ubuntu y derivados

Para instalar Git en ubuntu es muy sencillo, solo tenemos que seguir los siguientes pasos:

Primero actualizamos los repositorios, para ello abrimos un terminal y escribimos el siguiente comando:

sudo apt-get update

Una vez se han actualizado los repositorios instalamos git con el siguiente comando:

sudo apt-get install git

En ubuntu utilizaremos el propio terminal del sistema para trabajar con git.

Si utilizas otra distribución de linux puedes consultar como instalar git en la sección de descargas linux de la propia web de git.

Para comprobar que se ha instalado correctamente escribimos en el terminal git –version y nos mostrará la versión de git instalada.

Configurando un usuario

Una vez que tenemos instalado git lo primero que tenemos que configurar es el usuario que va a utilizar el repositorio en esta máquina, para ello debemos le vamos a indicar un nombre y una dirección de correo, esto lo hacemos con el siguiente comando desde consola:

git config --global user.name "nombre_usuario"
git config --global user.email "email_usuario"

Por ejemplo:

git config --global user.name "EduRevilla"
git config --global user.email "edu.revilla.vaquero@gmail.com"

Con git config –global -l podemos ver estos valores:

Estos datos se pueden sobrescribir volviendo a ejecutar los comandos anteriores.

El parámetro –global  indica que vamos a utilizar este usuario en todos los repositorios que utilicemos, es decir si tenemos varios proyectos gestionados por Git en nuestro ordenador estos usarán este usuario.

Si queremos utilizar otro nombre de usuario y otro email en un directorio concreto utilizaremos el comando git config pero usando el parámetro –local en lugar de –global.

Creando un repositorio en Git

Un repositorio es un sitio centralizado donde se almacena y mantiene información digital, por ejemplo todos los archivos y carpetas que componen un proyecto, y que puede estar almacenado localmente, es decir en tu propio equipo o remotamente.

Un repositorio remoto es una versión de tu proyecto que se encuentra alojado en Internet o en algún punto de la red.

Vamos a ver como crear un repositorio local con un ejemplo básico.

Vamos a crear un proyecto web, para ello creamos una carpeta en el lugar que prefiramos dentro en nuestro equipo y le llamamos por ejemplo proyectoGit1:

Entramos dentro de la carpeta que acabamos de crear y creamos un archivo que en un alarde de originalidad le vamos a llamar holamundo.html :

Editamos nuestro archivo holamundo.html y le añadimos un poco de html básico:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Hola mundo</h1>
    </body>
</html>

Bien, este va a ser nuestro punto de partida.

Ahora vamos a la consola de comandos y navegamos hasta la carpeta proyectoGit1 que acabamos de crear.

Una vez dentro de la carpeta proyectoGit1 vamos a crear un repositorio local con el siguiente comando:

git init

Nos mostrará un mensaje parecido a este: “Initialized empty Git repository in…” y la ruta del proyecto.

Esto creará una carpeta oculta llamada .git dentro de nuestro proyecto y es la carpeta que utilizará git para gestionar nuestro repositorio.

Las carpetas que empiezan por un punto se consideran ocultas y algunos sistemas operativos no las muestran.

Desde consola podemos ver los archivos y carpetas ocultos con el comando ls -a.

Si queremos dejar de utilizar git en nuestro proyecto solamente tenemos que eliminar la carpeta .git.

Para volver a utilizar git tendríamos que volver a ejecutar git init.

Estado de los archivos: git status

Para conocer el estado de nuestros archivos utilizamos el siguiente comando:

git status

Si ejecutamos este comando en estos momentos obtendremos lo siguiente:

Lo primero que vemos es “On branch master” esto significa que estamos en la rama principal, es la rama por defecto cuando creamos un repositorio.

Vemos en rojo holamundo.html nos avisa de que no hemos añadido ningún archivo para ser gestionado por git.

Git tiene dos procesos para gestionar nuestros archivos. Primero los tenemos que añadir a una zona intermedia conocida como stage y después tenemos que confirmar el paso  definitivo de los archivos al repositorio.

Añadir archivos: git add

Para añadir los archivos de nuestro proyecto utilizamos el siguiente comando:

git add .

“Hay que dejar un espacio entre add y el punto”

Con este comando le decimos a git que pase todos los archivos que estén sin pasar al stage.

Si ahora volvemos ejecutar el comando git status obtendremos algo como esto:

Nos informa de que no hay “commits todavía” y vemos que holamundo.html ahora aparece en verde, esto significa que holamundo.html ya se encuentra en el stage y debemos confirmarlo para que pase definitivamente al repositorio.

Confirmar los archivos: git commit

Para confirmar estos archivos y que pasen al repositorio final utilizamos en siguiente comando:

git commit -m "Commit Inicial"

Utilizamos el parámetro -m para indicarle una descripción del commit que vamos a hacer, en este caso le decimos que es el commit inicial.

Si no indicamos el parámetro -m se abrirá un editor de código de terminal (vim).
Para guardar el mensaje que escribamos pulsamos la tecla escape y escribimos :wq

Si volvemos a ejecutar el comando git status obtendremos este mensaje:

Esto significa que no hay nada para confirmar, es decir que todos los archivos se encuentran ya en el repositorio.

Ver los cambios realizados: git log

Para ver los las operaciones que hemos realizado utilizamos el siguiente comando:

git log --oneline

En estos momentos esto nos mostrará lo siguiente:

El primer conjunto de letras y números que vemos a la izquierda es el id del commit, utilizaremos este identificativo más adelante para poder volver a un estado anterior.

Después entre paréntesis nos indica que nos encontramos en la rama principal(master).

Por último nos muestra el mensaje que le pusimos al commit.

Rectificar commit: git commit –amend

Si nos hemos equivocado al escribir el mensaje al hacer el commit podemos rectificar utilizando el parametro –amend de la siguiente manera:

git commit --amend -m "Nuevo mensaje corregido para el commit"

Volver al un commit anterior: git checkout id_commit

Una de las grandes ventajas de utilizar git es que podemos volver a un estado anterior. Imaginemos que hemos realizado cambios en nuestro proyecto y nos da un error que hace que nada funcione,  no conseguimos saber que es lo que falla y queremos volver al estado anterior donde todo funcionaba, es una situación terrorífica pero bastante común. con el comando git checkout podemos volver a un estado anterior.

Para probarlo vamos a realizar cambios en nuestro archivo  holamundo.html, vamos a editarlo y a dejarlo de la siguiente manera:

<html>
    <head>
        <title>Hola mundo</title>
    </head>
    <body>
        <h1>Adiós mundo cruel...</h1>
    </body>
</html>

Bien, ahora en lugar de “Hola mundo” tenemos una etiqueta <h1> que dice “Adios mundo cruel…”.

Si ahora ejecutamos el comando git status nos avisa de que ha habido cambios en holamundo.html, por lo tanto debemos pasarlo al stage y hacer un commit, para ello tal y como hemos visto antes ejecutamos los siguientes comandos, primero lo añadimos al stage:

git add .

Y después hacemos el commit:

git commit -m "Hemos modificado holamundo.html"

Ahora si ejecutamos git log –oneline obtenemos lo siguiente:

Tenemos dos commits, el inicial y la última modificación.

Si nos hemos hemos arrepentido del último cambio que  hemos realizado podemos volver al estado anterior con el siguiente comando:

git checkout ffd325d

El valor Hexadecimal que va después de checkout es el identificador del commit al que queremos regresar, en este caso el del commit inicial.

Al ejecutar el checkout comprobaremos como nuestro archivo holamundo.html ha regresado al estado inicial, ahora vuelve a decir “Hola mundo” en lugar de “Adiós mundo cruel…”.

Si he han eliminado archivos de nuestro proyecto al volver a un commit anterior estos volverán a aparecer, al mismo tiempo si se han añadido archivos nuevos, al volver a un estado anterior estos desaparecerán. Es decir volveremos a tener una copia exacta de lo que teníamos en el momento de realizar el commit al que vamos a regresar.

Por no hacer este post demasiado largo por hoy lo dejamos aquí, en el siguiente post seguiremos aprendiendo más sobre esta maravillosa herramienta.

Que hosting elegir para alojar wordpress

Hola a todos, hoy os voy a hablar sobre hosting:

Hace poco traslade este blog que estás leyendo desde wordpress.com a wordpress.org en un hosting propio en webempresa.

Era algo que quería hacer hace mucho pero nunca encontraba el momento de hacerlo.

WordPress.com está muy bien para empezar, es grátis en la versión básica, te permite empezar a escribir sobre lo que más te guste sin gastar dinero.

Allá por el lejano 2013 abrí este blog, cuando creas un blog en wordpress.com por defecto tienes un dominio del tipo xxxx.wordpress.com, el primer paso fue comprar por 18 € al año el dominio reviblog.net, es recomendable tener tu propio dominio, además si después migras el blog a un hosting propio te facilita las cosas ya que al pasar de estar alojado en wordpress.com a tu propio hosting con wordpress.org pierdes el dominio wordpress.com y puedes perder el posicionamiento que tus entradas tenían en los buscadores, aunque puedes hacer redirecciones te recomiendo adquirir tu propio dominio desde el principio para evitarte dolores de cabeza.

Como comentaba cuando llevas tiempo con tu blog gratuito en wordpress.com te das cuenta que se te queda pequeño. WordPress.com tiene muchas limitaciones, no puedes instalar plugins, ni temas que no sean los que vienen de serie, ni tocar nada en el código de los plugins o themes, o incluso crearlos tu mismo, con lo que nos gusta a los programadores meter mano al código 😉

Tampoco puedes integrar publicidad que no sea adwords si quieres monetizar tu blog, no puede por ejemplo añadir anuncios de Google AdSense.

Total que tarde o temprano llega la hora de independizarte y montar tu blog en un hosting donde tu seas el dueño absoluto y tengas la libertad de modificar todo lo que quieras.

Es en este momento cuando viene la duda, ¿Que hosting me conviene más?

Si buscas en google la oferta es tan amplia que puede llegar a desbordarte.

Yo ya había trabajado con webempresa para clientes y me gusta el soporte que dan y sobre todo el rendimiento. Tienen discos ssd que dan a las páginas un extra de velocidad.

Si bien es verdad que hay otros buenos hostings, algunos más baratos, otros más caros. Todo depende de nuestro presupuesto y la relación calidad precio que busquemos.

Si te puedes permitir gastar un poco más recomiendo no escatimar en el hosting, a la larga como dice el dicho lo barato sale caro.

También conviene tener claro cuales son nuestras necesidades ya que casi todos los hostings tienen un plan básico que puede ser suficiente para páginas o blogs sencillos que no tengan demasiadas visitas, y casi todos te permiten cambiar a un plan superior si más adelante necesitas más espacio o potencia.

Voy a poner a continuación una comparativa de precios y prestaciones que ofrecen tres de los hostings españoles  especializados en WordPress que a mi juicio tienen una relación calidad/precio para que dependiendo de tus necesidades y tu presupuesto puedas elegir el que mas se adapta a tus necesidades:

Voy a empezar por webempresa que es el que yo he elegido, eso no significa que tenga que ser el mas conveniente para ti,  en función de tus necesidades la última palabra la tienes tú:

Webempresa

Características y precios:

Inicio

79 €/1 año

Standard

99 €/1 año

Profesional

199 €/1 año

Avanzado

249 €/1 año
99,9% Uptime Garantizado 99,9% Uptime Garantizado, 99,9% Uptime Garantizado 99,9% Uptime Garantizado
Let’s Encrypt Certificado SSL Gratis Let’s Encrypt Certificado SSL Gratis Let’s Encrypt Certificado SSL Gratis Let’s Encrypt Certificado SSL Gratis
Instalaciones WordPress Ilimitadas Instalaciones WordPress Ilimitadas Instalaciones WordPress Ilimitadas Instalaciones WordPress Ilimitadas
1 GB. + 3 GB. Back-ups
Discos SSD Máxima Velocidad
2 GB. + 6 GB. Back-ups
Discos SSD Máxima Velocidad
3 GB. + 9 GB. Back-ups
Discos SSD Máxima Velocidad
4 GB. + 12 GB. Back-ups
Discos SSD Máxima Velocidad
60 GB. Transferencia Mensual. Sin límite por número de visitas 120 GB. Transferencia Mensual. Sin límite por número de visitas 200 GB. Transferencia Mensual. Sin límite por número de visitas 240 GB. Transferencia Mensual. Sin límite por número de visitas
Soporte Hosting
24 horas 365 días
Tickets + Chat Online
Soporte Hosting
24 horas 365 días
Tickets + Chat Online
Soporte Hosting + WordPress
24 horas 365 días
Tickets + Chat Online
Soporte Hosting + WordPress
24 horas 365 días
Tickets + Chat Online
Optimizador de Imágenes Informe de mejora en Google PageSpeed Optimizador de Imágenes Informe de mejora en Google PageSpeed Optimizador de Imágenes Informe de mejora en Google PageSpeed Optimizador de Imágenes Informe de mejora en Google PageSpeed
WordPress Español Autoinstalado. Instala WordPress en 2-Clics WordPress Español Autoinstalado. Instala WordPress en 2-Clics WordPress Español Autoinstalado. Instala WordPress en 2-Clics WordPress Español Autoinstalado. Instala WordPress en 2-Clics
Protección Anti-Hackeos Personalizada WordPress Protección Anti-Hackeos Personalizada WordPress Protección Anti-Hackeos Personalizada WordPress Protección Anti-Hackeos Personalizada WordPress
42 Copias de Seguridad
Cada 4 Horas y auto-recuperables
42 Copias de Seguridad
Cada 4 Horas y auto-recuperables
42 Copias de Seguridad
Cada 4 Horas y auto-recuperables
42 Copias de Seguridad
Cada 4 Horas y auto-recuperables
Registro Dominio Gratis
1 Año con Whois privado
Registro Dominio Gratis
1 Año con Whois privado
Registro Dominio Gratis
1 Año con Whois privado
Registro Dominio Gratis
1 Año con Whois privado
Cuentas de email y bases de datos ilimitadas Cuentas de email y bases de datos ilimitadas Cuentas de email y bases de datos ilimitadas Cuentas de email y bases de datos ilimitadas
GARANTÍA 30 DÍAS
Devolución 100% importe
GARANTÍA 30 DÍAS
Devolución 100% importe
GARANTÍA 30 DÍAS
Devolución 100% importe
GARANTÍA 30 DÍAS
Devolución 100% importe
Magic Caché
Tu Web 30% más rápida
Magic Caché
Tu Web 30% más rápida

Pros

+ Calidad de Hosting excelente, buena velocidad.
+ Buen soporte a través de chat y tickets con un buen equipo de expertos.

Contras

– Espacio algo limitado en el plan Inicio.
– No tienen soporte telefónico aunque por chat te atienden al instante las 24h.

Pincha aquí para ir a Webempresa.

Hostinet

Características y precios:

WordPress 1

75€ - Renovación anual

60 € contratación 1 Año
112.50 € contratación 2 años
157.50 € contratación 3 años

WordPress 2

95€ - Renovación anual

76 € contratación 1 Año
142.50 € contratación 2 años
199.50 € contratación 3 años

WordPress 2

143€ - Renovación anual

114,40 € contratación 1 Año
214.50 € contratación 2 años
300.30 € contratación 3 años

5 GB – Espacio en disco SSD 10 GB – Espacio en disco SSD 15 GB – Espacio en disco SSD
40 GB Transferencia de datos 100 GB Transferencia de datos 150 GB Transferencia de datos
Instala WordPress de manera automática Instala WordPress de manera automática Instala WordPress de manera automática
Actualizaciones automáticas básicas de WordPress. Actualizaciones automáticas básicas de WordPress. Actualizaciones automáticas básicas de WordPress.
Certificado SSL Gratis Certificado SSL Gratis Certificado SSL Gratis
No incluye dominio gratuito No incluye dominio gratuito 1 dominio gratis
Soporte especializado vía email y teléfono Soporte especializado vía email y teléfono Soporte especializado vía email y teléfono
Cuentas de correo:
Emails ilimitados
Cuentas de correo:
Emails ilimitados
Cuentas de correo:
Emails ilimitados
Garantía 30 días Garantía 30 días Garantía 30 días

Pros

+ Servidores ubicados en España.
+ Soporte telefónico

Contras

– No incluye dominio gratuito en los planes más baratos.
– Menor trasferencia de datos en los planes mas económicos.

Pincha aquí para ir a Hostinet

Raiola Networks

Características y precios:

Hosting Inicio SSD WordPress

71,4 €/1 año

Hosting Base SSD WordPress

95,4 €/1 año

Hosting Medio SSD WordPress

119,4 €/1 año

Hosting Pro SSD WordPress

143,4 €/1 año
1 único dominio Hasta 3 dominios Hasta 5 dominios Hasta 30 dominios
5GB de almacenamiento 10GB de almacenamiento 15GB de almacenamiento 30GB de almacenamiento
100GB de transferencia 200GB de transferencia 300GB de transferencia 500GB de transferencia
1024MB de RAM 1024MB de RAM 1024MB de RAM 1024MB de RAM
50% de 1 CPU 60% de 1 CPU 70% de 1 CPU 80% de 1 CPU
10 cuentas de correo 20 cuentas de correo 30 cuentas de correo 50 cuentas de correo
Garantía 30 días Garantía 30 días Garantía 30 días Garantía 30 días

Pros

+ Capacidad en disco y transferencia
+ Soporte telefónico

Contras

– Limitación en numero de cuentas de correo
– Rendimiento algo inferior a Webempresa

Pincha aquí para ir a Raiola Networks

 

Conclusión:

Como podéis ver cada uno tiene su pros y sus contras, yo he elegido Webempresa por su gran rendimiento y el buen soporte que dan a pesar de no tener soporte telefónico, aún así por chat siempre me han atendido de inmediato con gran profesionalidad resolviendo todos las dudas, llevan más de 20 años  de experiencia y eso se nota, sin embargo cualquiera de los tres pueden ser válidos dependiendo de tu presupuesto y tus necesidades.

Si tienes algún experiencia con alguno de estos tres hosting puedes dejarlo en los comentarios y  así ayudar a otros a tomar su decisión.

Como crear componentes personalizados con Ionic

Hola a todos:

En posts anteriores hemos aprendido a crear nuestras apps multiplataforma con Ionic.
Ionic nos ofrece un montón de componentes ya creados para utilizar en nuestras apps y realmente nos permiten con poco esfuerzo crear una interfaz funcional para nuestras aplicaciones.

Sin embargo hay momentos que puede interesarnos crear nuestros propios componentes personalizados.

Un componente es simplemente algo que podemos mostrar las veces que queramos en la pantalla, como si fuese una etiqueta html, solo que a su vez un componente puede estar formado por etiquetas html y otros componentes.

Para ver mejor como podemos crear nuestro propios componentes personalizados en Ionic vamos a crear un proyecto de prueba al que vamos a llamar miComponente:

ionic start miComponente blank

Una vez creado el proyecto si  entramos en home.ts veremos esto:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

En Ionic todo son componentes, de hecho las páginas de nuestra aplicación son componentes, si nos fijamos tiene un decorador @Component por lo que podemos ver que la propia pagina es un componente  que tiene el selector ‘page-home’ y como plantilla utiliza el archivo home.html.

Vamos a crear un sencillo componente al que vamos a llamar saludar, para ello vamos a echar mano de ionic generator, nos situamos dentro la carpeta de  nuestro proyecto en la consola de comandos y tecleamos lo siguiente:

ionic g component saluda

Con esto se habrá creado una nueva carpeta llamada components y dentro una carpeta llamada saluda que al igual que las páginas contiene un archivo .ts como controlador, un archivo .scss para los estilos y su plantilla .html.

Si observamos lo que contiene el archivo saluda.html vemos que simplemente muestra el contenido de la variable text dentro de un div:

<!-- Generated template for the SaludaComponent component -->
<div>
  {{text}}
</div>

Vemos que text está definida en el controlador saluda.ts y contiene la famosa frase “Hello Word”

import { Component } from '@angular/core';

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hello World';
  }

}

Como vemos el controlador de un componente es prácticamente igual que el de una página.

Tenemos el decorador @Component donde se indica que su selector es ‘saluda‘ y la plantilla que utiliza es saluda.html.

Para poderlo utilizar tenemos que importar y declarar el componente en app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SaludaComponent } from '../components/saluda/saluda';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SaludaComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Para utilizarlo en la página home editamos el archivo home.html y añadimos la etiqueta con el componente que acabamos de crear:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <saluda></saluda>
</ion-content>

Así de fácil.

Si ejecutamos nuestra app de ejemplo con ionic serve -l veremos algo similar a esto:

 

A nuestro componente le podemos añadir también atributos personalizados.
Por ejemplo podemos pasarle un atributo que se llame nombre de esta manera:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <saluda nombre="Eduardo"></saluda>
</ion-content>

Luego en el controlador definimos el parámetro de entrada con el decorador Input de la siguiente manera:

import { Component, Input } from '@angular/core';

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hello World';
  }

}

Para poder utilizar el decorador Input debemos importarlo primero.

Ahora podemos hacer que en lugar de saludar al mundo con “Hello Word” salude a la persona que recibamos en el parámetro nombre:

import { Component, Input } from '@angular/core';

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
    this.text = 'Hola '+this.nombre;
  }

}

Bien, si como en el ejemplo hemos pasado “Eduardo” al parámetro nombre cabría esperar ver en pantalla “Hola Eduardo”, sin embargo comprobamos que muestra “Hola undefined”, a no ser que tus padres te hayan puesto de nombre undefined hay algo que no está funcionando.

Eso eso es porque estamos accediendo a la variable this.nombre desde el constructor, y en el momento que se ejecuta el constructor aun no están accesibles los parámetros que recibimos en nuestro componente, para ello utilizamos ngOnInit:

/**
 * Generated class for the SaludaComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'saluda',
  templateUrl: 'saluda.html'
})
export class SaludaComponent {

  text: string;
  @Input('nombre') nombre : string;

  constructor() {
    console.log('Hello SaludaComponent Component');
  }


  ngOnInit(){
    this.text = 'Hola '+this.nombre;
  }


}

Ahora podemos comprobar que muestra el nombre que le hayamos pasado.

También podemos utilizar la la variable nombre directamente en la plantilla de nuestro componente de esta manera:

<!-- Generated template for the SaludaComponent component -->
<div>
  Hola {{ nombre }}
</div>

Por ultimo si en lugar de pasarle directamente el nombre al componente queremos utilizar una variable debemos poner el parámetro entre corchetes , por ejemplo imaginemos que tenemos un array de usuarios  y queremos saludarles a todos, en home.ts definiriamos un array de usuarios:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  usuarios: any = [
    { 
      nombre: 'Eduardo',
      edad: 41
    },
    { 
      nombre: 'Pedro',
      edad: 28
    },
    { 
      nombre: 'Francisco',
      edad: 34
    },
    { 
      nombre: 'Maria',
      edad: 43
    }
  ]

  constructor(public navCtrl: NavController) {

  }

}

Ahora en home.html podemos recorrer el array con *ngFor y mostrar nuestro componente saludo pasándole la variable usuario.nombre:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
 <saluda  *ngFor="let usuario of usuarios" [nombre]="usuario.nombre"></saluda>
</ion-content>

Como podemos ver en este caso el parámetro nombre va entre corchetes []  ya que lo que le pasamos no es un texto literal sino una variable.

Si probamos este ejemplo veremos algo como esto:

Este ejemplo es muy sencillo y es solo para explicar como funcionan los componentes en Ionic, evidentemente no merece la pena crear un componente que solo contenga un div y un texto, pero podemos ampliar nuestro componente añadiendo una imagen o una ficha completa con los datos del usuario, o cualquier otro elemento que se nos ocurra.

Espero que estos sencillos ejemplos sirvan para comprender como crear componentes personalizados en Ionic.

 

Como crear una app multi idioma con Ionic

Hola a todos, hoy vamos a aprender como crear una app multi idioma con Ionic.

Como siempre vamos a crear una app de ejemplo así que desde consola creamos un nuevo proyecto al que vamos a llamar ejemploidioma:

ionic start ejemploidioma blank --cordova

Con –cordova le indicamos que incluya apache cordova para poder generar el código para android e ios.

Para crear un app multi idioma con Ionic vamos a instalar la librería  ngx-translate:

npm install npm install @ngx-translate/core @ngx-translate/http-loader --save

Ahora en app.module.ts tenemos que añadir los siguientes imports:

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http";

Justo debajo de los imports, antes de @NgModule añadimos el siguiente código:

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, "../assets/i18n/", ".json");
}

Por último declaramos dentro de imports lo que esta marcado en amarillo:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
      })
 
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

El código completo de app.module.ts quedaría de la siguiente manera:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient, HttpClientModule } from "@angular/common/http";

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, "../assets/i18n/", ".json");
}

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
          loader: {
              provide: TranslateLoader,
              useFactory: HttpLoaderFactory,
              deps: [HttpClient]
          }
      })
 
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Ahora vamos a editar app.component.ts  y añadimos el siguiente código:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService } from '@ngx-translate/core';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private translateService: TranslateService) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.translateService.setDefaultLang('es');
      this.translateService.use('es');

      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

Con this.translateService.setDefaultLang(‘es’); le idicamos que el idioma por defecto es el español y con this.translateService.use(‘es’); hacemos que sea el idioma seleccionado.

Dentro de la carpeta src/assets vamos a crear una carpeta llamada i18n y dentro de esta situaremos los archivos con los literales en los diferentes idiomas, en este ejemplo vamos a usar inglés y español, por lo que vamos a crear dos archivos llamados en.json para inglés y es.json para español:

En en.json pondremos  lo siguiente:

{
  "HOLA": "Hi {{ value }}",
  "IDIOMA": "Language",
  "BIENVENIDO" : "Welcome"
}

 

Y en es.json:

{
  "HOLA": "Hola {{ value }}",
  "IDIOMA": "Idioma",
  "BIENVENIDO" : "Bienvenido"
}

 

Como puedes observar es un archivo en formato json donde la clave es lo que escribiremos en la vista y  el valor es lo que se mostrará en función del idioma seleccionado.

Como puedes ver HOLA se traduce como “Hola {{ value }}”, donde value se sustituirá por el valor pasado, veremos un poco más adelante como se utiliza.

Ya estamos preparados para traducir  nuestra app.

Vamos a modificar home.html y vamos a crear un ejemplo sencillo donde vamos a tener un elemento ion-card que simplemente nos da la Bienvenida y nos saluda y un selector para cambiar de idioma:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ejemplo Idioma
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card>
    <ion-card-header text-center>
      {{ 'BIENVENIDO' | translate }}
    </ion-card-header>
      
    <ion-card-content>
      <p text-center>
        {{ 'HOLA' | translate:{value: 'Eduardo'} }} 
      </p>
    </ion-card-content>
  </ion-card>

  <ion-item>
    <ion-label>{{ 'IDIOMA' | translate }} </ion-label>
    <ion-select [(ngModel)]="idioma" (ionChange)="cambioIdioma($event)">
      <ion-option value="es">Español</ion-option>
      <ion-option value="en">Inglés</ion-option>
    </ion-select>
  </ion-item>
</ion-content>

Como vemos en la etiqueta ion-select le decimos que en el evento (ionChange) llame a la función cambioIdioma($event), $event contendrá la opción seleccionada.

Para traducir las cadenas al idioma seleccionado utilizamos en pipe o barra vertical ‘|’ seguido de la palabra translate que es filtro que se aplica.

Como comenté antes podemos pasarle un valor al filtro translate de la siguiente manera:

{{ ‘HOLA’ | translate:{value: ‘Eduardo’} }}

Con esto le estamos diciendo que traduzca la cadena HOLA y le pase al fintro el value ‘Eduardo’.

Al ir a buscar el valor en el archivo json sustituirá valúe por ‘Eduardo’:

“HOLA”: “Hi {{ value }}”,

Esto puede servirnos de ayuda cuando queremos traducir cadenas mostrando un valor que dependiendo del idioma se debe mostrar en una posición diferente de la cadena, por ejemplo la frase “Este es el coche de Eduardo” en inglés sería “this is Eduardo’s car”.

Por lo tanto en inglés podríamos pasarle el nombre y traducirlo así:
“this is {{ value }}’s car”,

Mientras que en español sería
“Este es el coche de {{ value }}”

Bien, ahora solo nos queda definir la función cambioIdioma en el controlador home.ts, para poder cambiar de idioma necesitaremos importar TranslateService e inyectarlo en el constructor:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private translateService: TranslateService) {

  }

  cambioIdioma(selectedValue){
    this.translateService.use(selectedValue);
  }

}

Con selectedValue es el idioma que hemos seleccionado en el select y con this.translateService.use(selectedValue) le estamos diciendo que utilice el idioma que le pasamos.

Ya podemos probar nuestro pequeño ejemplo, ejecutando ionic serve -l desde consola veremos algo como esto en nuestro navegador:

Ejemplo de app multi idioma con ionic
Ejemplo de app multi idioma con ionic

Por último, como extra si desde el controlador necesitamos traducir una cadena podemos utilizar this.translateService.instant().

Por ejemplo si queremos mostrar un loading y que se muestra cargando en el idioma seleccionado, teniendo ya definido el literal cargando en los ficheros .json podemos hacer lo siguiente:
this.loading = this.loadingCtrl.create({
      content: this.translateService.instant('Cargando'),
      spinner: 'dots',
    });
Hay que tener e cuenta que  translate.instant es síncrono, por lo que tenemos que estar seguros de que  los archivos lang  han sido cargados para obtener traducciones.
En su lugar también se puede utilizar translate.get, que devuelve un elemento observable.
Para saber más sobre ngx-translate podeis visitar su página oficial en http://www.ngx-translate.com/
Eso es todo por hoy, espero que te sea de utilidad.

Add to post – Plugin WordPress para añadir contenido al inicio y/o al final de todos los posts

Hola a todos:

Hoy os traigo un plugin que he desarrollado para añadir contenido al principio y/o al final de cada post.

Descripción del plugin:

A veces nos puede interesar añadir contenido que se repite en a todos los posts, puede ser un banner de publicidad, un aviso, una firma al final de cada post, añadir enlaces a redes sociales…,etc.
Si necesitas hacer esto tanto con las entradas que crees nuevas como en las antiguas, en caso de tener mucho contenido en tu blog puede ser muy tedioso ir uno por uno cada vez que necesitas hacer un cambio o añadir algo nuevo.

El plugin que he creado te añadirá el contenido que quieras en todos los posts, tanto los que crees nuevos como en los antiguos.

Al instalar este plugin genera un apartado nuevo en la parte de administración llamado Add to post con dos cajas de texto una si queremos añadir contenido antes de cada post, como por ejemplo un banner o un texto y otra caja de texto donde introduciremos lo que queramos que aparezca al final de cada post, como una firma, un mensaje de despedida, etc.

Cabe destacar que se puede introducir tanto texto como imágenes y también utilizar short codes lo cual puede ser muy útil si queremos mostrar contenido a través de short codes de otros plugins, por ejemplo mostrar productos de woocommerce o cualquier elemento que se pueda generar con un short code.

Instalación

Para instalar el plugin solo tenéis que descargar el archivo .zip e instalarlo en vuestro WordPress.

Si vuestra instalación de WordPress permite añadir plugins directamente desde la administración tenéis que ir a la sección plugins, pulsar en el botón Añadir nuevo y después pulsar el botón Subir plugin. Se abrirá una ventana para seleccionar el archivo, debéis seleccionar el archivo que habéis descargado y pulsar el botón Instalar ahora.

Una vez el plugin se ha instalado pulsaremos en el botón Activar plugin.

Si vuestra instalación de wordpress no admite subir plugins desde la administración entonces teneis que descomprimir el archivo.zip y con vuestro cliente de ftp subir la carpeta del plugin dentro de lar carpeta plugins que a su vez está dentro de wp-content.

Una vez subida teneis que ir a la sección plugins dentro de la administración de wordpress, y buscar en el listado de plugins uno que se llame (rev) add_to_post y pinchar en el enlace Activar:

Descarga

El plugin lo podéis descargar en el enlace de abajo. La descarga es gratuita, lo único que os pido a cambio (tampoco os obligo ;-))  es que os suscribáis a mi blog para estar al día de los últimos posts y que compartáis este posts en las redes sociales.

Pulsa el botón para descargar el plugin:

¿Necesitas un presupuesto para  un desarrollo WordPress a medida?

¿Quieres un plugin a medida que realice una funcionalidad concreta que necesitas para tu WordPress?

Solicita un presupuesto  sin compromiso: