En este artículo os compartimos como clonar la plantilla de LinkTree en tu WordPress para que sea totalmente presonalizable y el tráfico que puedas capturar desde tu Instagram o Twitter se quede en tu web y lo puedas medir con Analytics y otras herramientas de retargeting.
Ver ejemplo de página tipo LinkTree en WordPress
Creamos una nueva plantilla, bien en la carpeta de nuestro theme o dentro de una subcarpeta “/page-templates” o “templates” dentro del propio theme.
En nuestro archivo creado, añadiremos lo siguiente:
<?php /* Template Name: Links */ ?>
Esto asignará el nombre “Links” a nuestra plantilla que nos permitirá identificarla y seleccionarla en nuestro wordpress.
A continuación incorporaremos todo el código que tengamos en el <head> de nuestro archivo header.php, además del “<! doctype html >” y “<html>”
Es muy importante que en dicho código esté incluido la función php:
<?php wp_head(); ?>
Seguido, añadiremos la etiqueta html “<body>”.
Antes del cierre de la etiqueta “</body>” es imprescindible incorporar la función php:
<?php wp_footer(); ?>
*Tanto está función php como la indicada anteriormente “<?php wp_head(); ?>” son importantes ya que afectan al funcionamiento del wordpress, permite mostrar la barra de admin y todas sus funcionalidades. También se cargarán todos los archivos javascript, css y la información relativa a nuestro sitio web.
Una vez tengamos montada la estructura básica html/php de nuestra plantilla, incorporaremos el “loop” que mostrará el contenido que nosotros insertemos en nuestra página. Lo haremos dentro de la etiqueta <body> y antes de la función wp_footer().
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!– Aquí añadiremos el código html personalizado para nuestra página maquetada –>
<?php endwhile; ?>
<?php endif; ?>
Para mostrar el título de nuestra página, tendremos que incorporar la función “the_title()” y para el contenido del editor, la función será “the_content()”:
Ej: <?php the_title(); ?>; <?php the_content(); ?>
Insertar logotipo y fondo para la página
Pare ello, utilizaremos el plugin “Advanced custom field”.
Este plugin, nos permitirá incorporar diferentes campos de imagen para insertar en nuestra página un logotipo y una imagen de fondo.
Una vez instalado el plugin, nos iremos a la configuración de los campos y crearemos un nuevo grupo de campos.
Crearemos un campo personalizado de tipo imagen
En el campo “Return format”, marcaremos la opción “Image URL” que hará que se pinte la url de la imagen en nuestra página y así podremos insertarla en nuestro html con una etiqueta <img>.
Una vez creado el campo, haremos lo mismo para imagen de fondo.
Por último, definiremos en el grupo de campos donde queremos que se muestren estos campos que acabamos de crear, en este caso, marcaremos nuestra plantilla de página “Links”
Ahora nos iremos a la nuestra página, y completaremos los campos con las imágenes que queramos introducir en ella.
Recuerda, que para que nuestra página utilice la plantilla de página que hemos creado, debes seleccionarla en el apartado “Plantilla” en los “Atributos de página”.
Una vez seleccionada dicha plantilla, ya se mostrarán los campos que hemos creado.
Una vez seleccionadas las imágenes, procederemos a incluirlas en nuestra plantilla.
Crearemos las variables:
$logo = get_field(‘logo’);
$background = get_field(‘background’);
Añadiremos el código para que el body de nuestra página tenga la imagen de imagen de fondo que nosotros hemos introducido en el campo y haremos lo mismo con el logotipo de la página.
Para añadir los enlaces en la página que hemos creado, podremos hacerlo de dos formas.
La primera, incluyendo una lista con los enlaces a través del editor mediante la pestaña “HTML” del mismo podremos incorporar clases css o diferentes estilos en línea para los botones.
O bien, podremos crear un nuevo campo, en este caso de tipo “Repeater”, que nos permite crear un estructura de campos y replicarla tantas veces como queramos.
Este tipo de campo nos permitirá crear diferentes subcampos. En este caso, nosotros hemos utilizado un campo de enlace (permite incluir el texto del enlace, la url y el target)
Campo enlace: https://www.advancedcustomfields.com/resources/link/
Campo selección de color: https://www.advancedcustomfields.com/resources/color-picker/
Una vez creados los campos, nos iremos a nuestra página y completaremos la información de los enlaces que queramos mostrar.
A continuación incluiremos el código del campo repeater con el código de los subcampos que nos pintará en nuestra página los enlaces que hemos incluido.
Con esto, ya tendríamos nuestra página de enlaces:
Thank You For Your Vote!
Sorry You have Already Voted!
