Instrucciones detalladas para saber como adjuntar un Plugin a WordPress.org. Para subir un plugin al repositorio oficial de WordPress.org necesitas cumplir con requisitos técnicos, legales y de calidad: tener un plugin funcional, seguir las directrices de seguridad y licencias, y pasar una revisión manual.
Requisitos técnicos
Estructura del plugin: Debe estar correctamente organizado con archivos como readme.txt, plugin-name.php, y carpetas de recursos si aplica.
Archivo readme.txt: Obligatorio. Debe seguir el formato oficial e incluir:
Nombre del plugin
Descripción
Versión
Autor
Licencia
Etiquetas
Requisitos mínimos de WordPress y PHP
Compatibilidad: Debe funcionar con la última versión estable de WordPress.
Seguridad: No debe incluir vulnerabilidades conocidas, funciones inseguras (como eval() sin control), ni puertas traseras.
Requisitos legales
Licencia GPL o compatible: Todo el código debe estar bajo la licencia GNU GPL v2 o superior.
Sin contenido comercial cerrado: No se permite incluir código que requiera pago para funcionar (puedes enlazar a versiones premium, pero no bloquear funciones básicas).
Sin spam ni rastreadores ocultos: No se permite insertar enlaces ocultos, publicidad engañosa ni recopilación de datos sin consentimiento.
🔍 Revisión y proceso de envío
Accede con tu cuenta WordPress.org: https://wordpress.org/plugins/developers/add/
Sube el archivo ZIP del plugin.
El equipo de revisión lo analiza manualmente (tarda entre 1 y 10 días).
Si se aprueba, recibirás acceso SVN para subir nuevas versiones y gestionar tu plugin.
Buenas prácticas recomendadas
Usa funciones y APIs oficiales de WordPress.
Documenta bien tu código.
Evita conflictos con otros plugins (prefijos únicos).
Incluye soporte básico y actualizaciones periódicas.
Como redactar el readme.txt
Redactar un buen readme.txt para tu plugin de WordPress.org es clave para que sea aprobado y bien entendido por los usuarios. Este archivo describe tu plugin, sus funciones, requisitos y cómo usarlo. Aquí te explico cómo estructurarlo correctamente:
📄 Estructura básica del readme.txt
=== Nombre del Plugin ===
Contribuye a una breve descripción clara y atractiva.
== Descripción ==
Explica qué hace tu plugin, para quién está pensado y qué problema resuelve. Puedes usar varios párrafos.
== Instalación ==
1. Sube los archivos del plugin al directorio `/wp-content/plugins/`.
2. Activa el plugin desde el menú "Plugins" en WordPress.
3. (Opcional) Configura los ajustes desde el panel de administración.
== Preguntas frecuentes ==
= ¿Este plugin es compatible con multisite? =
Sí, funciona en instalaciones multisite.
= ¿Requiere configuración adicional? =
No, pero puedes personalizarlo desde el panel de ajustes.
== Capturas de pantalla ==
1. Vista del panel de configuración.
2. Ejemplo de resultado en el frontend.
== Changelog ==
= 1.0 =
* Versión inicial del plugin.
== Upgrade Notice ==
= 1.0 =
Primera versión estable.
== Tags ==
login, seguridad, personalización, acceso
== Requisitos ==
* WordPress 5.5 o superior
* PHP 7.4 o superior
== Licencia ==
Este plugin está bajo la licencia GPLv2 o superior.
✅ Consejos clave
Usa etiquetas claras para que el plugin sea fácil de encontrar.
Incluye capturas de pantalla si es visual.
Mantén el changelog actualizado con cada versión.
Asegúrate de que el texto esté en inglés si lo vas a subir al repositorio oficial (aunque puedes incluir traducciones).
Plugin Contador de Visitas Simple
Este es un Plugin para WordPress, que cuenta las visitas a las entradas y las páginas de un sitio web construido con WordPress.
Te presentamos una página web HTML: Mi Colección de Cine. Cine en HTML, que podrás ver como funciona, y también tendrás la posibilidad de copiar el código completo a continuación.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Plataforma de Videos</title>
<style>
body {
font-family: sans-serif;
margin: 0;
background-color: #f0f0f0;
}
.contenedor-principal {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.videos-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.video-contenedor {
width: calc(33.33% - 20px); /* 3 columnas */
margin-bottom: 20px;
border: 1px solid #ddd;
box-sizing: border-box;
position: relative; /* Para el posicionamiento del iframe */
overflow: hidden; /* Evita desbordamientos */
}
.video-titulo {
font-weight: bold;
margin-bottom: 5px;
}
.video-contenedor::before {
content: "";
display: block;
padding-top: 56.25%; /* Aspect ratio 16:9 (9/16 * 100) */
}
.video-contenedor iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Media Queries para Responsive Design */
@media (max-width: 768px) {
.video-contenedor {
width: calc(50% - 20px); /* 2 columnas en tablets */
}
}
@media (max-width: 500px) {
.video-contenedor {
width: 100%; /* 1 columna en móviles */
}
}
</style>
</head>
<body>
<div class="contenedor-principal">
<h1>Mi Colección de Cine</h1>
<div class="videos-grid">
<div class="video-contenedor">
<h2 class="video-titulo">Video 1: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/Q0eLHwYjFUE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 2: Ejemplo 2</h2>
<iframe src="https://www.youtube.com/embed/6HYyVlZh_ho" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Una breve descripción.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 3: Ejemplo 3</h2>
<iframe src="https://www.youtube.com/embed/mOy-v9LlERI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Descripción más larga para probar el ajuste.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 4: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/Om1jS2ZSnCU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 5: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/zddu2dFOdJg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 6: Ejemplo 3</h2>
<iframe src="https://www.youtube.com/embed/OhiHyNIpPGk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Descripción más larga para probar el ajuste.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 7: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/1QyNaF5O_a4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 8: Rick Astley</h2>
<iframe src="https://www.youtube.com/embed/vyU0Tj3TpQk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Nunca te rindas, nunca te abandones, nunca corras y te desampares.</p>
</div>
<div class="video-contenedor">
<h2 class="video-titulo">Video 9: Ejemplo 3</h2>
<iframe src="https://www.youtube.com/embed/qcWOl3uw8os" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<p>Descripción más larga para probar el ajuste.</p>
</div>
</div>
</div>
</body>
</html>
Este código define una página web que muestra una colección de videos. Vamos a analizarlo sección por sección:
Declaración DOCTYPE:
<!DOCTYPE html>: Esta línea le dice al navegador web que este documento está escrito en HTML5.
Elemento HTML:
<html lang="es">: Este es el elemento raíz del documento HTML. Define el idioma del documento como español («es»).
Sección Head (Cabeza):
<head>: Esta sección contiene metainformación sobre la página web que no se muestra directamente en la página.
<meta charset="UTF-8">: Esta línea especifica la codificación de caracteres utilizada por la página web, que en este caso es UTF-8. Esto permite que la página web muestre correctamente caracteres de diferentes idiomas.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Esta línea ayuda a que la página web ajuste su diseño a diferentes tamaños de pantalla. Asegura que la página web sea responsive y se vea bien en computadoras de escritorio, tablets y dispositivos móviles.
<title>Mi Plataforma de Videos</title>: Esta línea define el título de la página web, que se mostrará en la pestaña del navegador.
CSS Style (Estilo):
<style>: Esta sección contiene código CSS que define los estilos aplicados a los elementos HTML.
Los estilos definen varios aspectos de la apariencia de la página web, incluyendo:
La familia de fuentes para el texto del cuerpo.
Los márgenes y el color de fondo para el cuerpo.
Estilos para el contenedor principal (contenedor-principal) incluyendo su ancho máximo, márgenes, padding, color de fondo y un sutil efecto de sombra.
Estilos para la cuadrícula de videos (videos-grid) incluyendo cómo se muestran los videos en un diseño de cuadrícula con espacio entre ellos.
Estilos para los contenedores de video individuales (video-contenedor) incluyendo su ancho (calculado para crear un diseño de 3 columnas en pantallas más grandes), márgenes, bordes y posicionamiento.
Estilos para los títulos de los videos (video-titulo) para que aparezcan en negrita y añadir algo de espacio debajo.
Un estilo especial usando el pseudo-elemento ::before para crear una relación de aspecto fija (16:9) para los contenedores de video. Esto asegura que los videos mantengan sus proporciones incluso si las descripciones de abajo tienen diferentes longitudes.
Estilos para los iframes que contienen los videos de YouTube, asegurando que llenen todo el contenedor de video.
Las media queries (@media) se utilizan para definir ajustes de diseño responsive para pantallas más pequeñas:
En pantallas más pequeñas de 768px (tablets), los contenedores de video se ajustan a un diseño de 2 columnas.
En pantallas más pequeñas de 500px (móviles), los contenedores de video se vuelven de ancho completo (1 columna).
Sección Body (Cuerpo):
<body>: Esta sección contiene el contenido que se mostrará en la página web.
<div class="contenedor-principal">: Este es el contenedor principal para el contenido de la página web. Tiene estilos aplicados basados en la clase «contenedor-principal» definida en la sección CSS.
<h1>Mi Colección de Cine</h1>: Esta línea define un encabezado («h1») con el texto «Mi Colección de Cine».
<div class="videos-grid">: Este es otro contenedor con la clase «videos-grid» que define cómo se muestran los elementos de video en un diseño de cuadrícula.
Dentro del contenedor de la cuadrícula, hay múltiples elementos <div> con la clase «video-contenedor». Cada uno de estos representa un video individual.
Cada contenedor de video incluye:
Un elemento <h2> con la clase «video-titulo» para mostrar el título del video.
Un elemento <iframe> para incrustar el video de YouTube. La fuente del iframe es una URL de video de YouTube.
Un elemento <p> para mostrar una descripción del video.
En general, este código crea una página web con un diseño responsive que muestra una colección de videos de YouTube. Los videos están organizados en un diseño de cuadrícula con títulos y descripciones.
Un acortador de URL es un tipo de servicio software que permite usar URL cortas las cuales redirigen a la URL original. El objetivo de este tipo de servicios es hacer la URL más manejable y fácil de compartir y recordar. Se utiliza sobre todo para acortar enlaces profundos que, por su naturaleza, suelen ser largos.
Funcionamiento del Acortador URL
El funcionamiento del acortador de URL consiste básicamente en asignar caracteres aleatorios a nuestra URL para reducir su longitud. Aunque algunos permiten sustituir estos caracteres aleatorios por las palabras clave que queramos.
Un método habitual para generar URL cortas es utilizar una función hash, como MD5 o SHA-256, para generar un hash de longitud fija de la URL original. Luego, este hash se codifica en una forma más corta utilizando Base62. Base62 utiliza caracteres alfanuméricos (AZ, az, 0-9), que son compatibles con las URL y proporcionan un espacio de codificación denso.
El servicio de acortamiento de URL que elija mantendrá la conexión entre el nuevo enlace y la URL original. Esto significa que cualquier persona que haga clic en su nuevo enlace será redirigida a la página original.
CÓDIGO COMPLETO DE ACORTADOR URL
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<style>
body {
font-family: sans-serif;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center; /* Centra el contenido horizontalmente */
min-height: 100vh; /* Asegura que el body ocupa toda la altura de la pantalla */
}
.container {
width: 90%;
max-width: 500px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; /* Incluye el padding y el border en el ancho total */
}
label {
display: block;
margin-bottom: 5px;
}
input[type="url"] {
width: calc(100% - 12px); /* Ajusta el ancho para compensar el padding */
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
#resultado {
margin-top: 10px;
word-wrap: break-word; /* Permite que las URLs largas se ajusten */
}
/* Media query para pantallas más pequeñas */
@media (max-width: 400px) {
.container{
width: 95%;
}
}
</style>
</head>
<body>
<h1>Acortador de URLs</h1>
<div class="container">
<label for="url">Introduce la URL:</label>
<input type="url" id="url" name="url" required placeholder="Ej: https://www.ejemplo.com">
<button onclick="acortarUrl()">Acortar</button>
<div id="resultado"></div>
<button id="copiar" style="display:none;" onclick="copiarAlPortapapeles()"></button>
</div>
<script>
function acortarUrl() {
const urlOriginal = document.getElementById("url").value;
const resultadoDiv = document.getElementById("resultado");
const copiarButton = document.getElementById("copiar"); // Obtener referencia al botón
if (!urlOriginal) {
resultadoDiv.innerHTML = "<p style='color: red;'>Por favor, introduce una URL.</p>";
copiarButton.style.display = "none"; // Ocultar el botón si hay error
return;
}
try {
new URL(urlOriginal); // Validar formato de URL
} catch (error) {
resultadoDiv.innerHTML = "<p style='color: red;'>La URL introducida no es valida.</p>";
copiarButton.style.display = "none"; // Ocultar el botón si hay error
return;
}
// Simulación de acortamiento (REEMPLAZAR CON UNA API REAL)
const caracteresAleatorios = Math.random().toString(36).substring(2, 8);
const urlAcortada = `https://ee3.es/${caracteresAleatorios}`;
// ... (Código de validación y generación de urlAcortada igual al anterior) ...
resultadoDiv.innerHTML = `<p>URL Acortada: <a href="${urlOriginal}" target="_blank" rel="noopener noreferrer">${urlAcortada}</a></p>`;
document.getElementById("url").value = "";
document.getElementById("copiar").style.display = "block";
}
function copiarAlPortapapeles() {
const urlAcortadaElement = document.querySelector("#resultado a");
if (urlAcortadaElement) {
// *** CORRECCIÓN IMPORTANTE: copiar el texto del enlace ***
navigator.clipboard.writeText(urlAcortadaElement.textContent).then(() => {
alert("URL copiada al portapapeles.");
}).catch(err => {
console.error('Error al copiar: ', err);
alert("No se pudo copiar la URL.");
});
}
}
</script>
</body>
</html>
Vamos a ver a continuación la forma de poner un reloj en WordPress. Para ello vamos a insertar la Fecha y la Hora con código HTML.
A continuación veremos las funciones más utilizadas de JavaScriptrespecto a la fecha y hora.
JavaScript
getDate()
Devuelve el dia del mes (entre el 1 y el 31)
getDay()
Devuelve el dia de la semana (entre el 0 y el 6)
getMonth()
Devuelve el mes (entre el 0 y el 11)
getFullYear()
Devuelve el año (en formato de 4 digitos)
getHours()
Devuelve la hora (entre el 0 y el 24)
getMinutes()
Devuelve los minutos (desde 0 a 59)
getSeconds()
Devuelve los segundos (desde 0 a 59)
getTime()
Devuelve el número de milisegundos desde el 1ro de Enero de 1970
getTimezoneOffset()
Devuelve la diferencia de horario en minutos entre la hora local y GMT (Meridiano de Greenwich)
getUTCHours()
Devuelve la hora de acuerdo a UTC (Tiempo Universal Coordinado)
Funciones JavaScript
Insertar Fecha mediante un Script en una página web HTML.
<script>
//<![CDATA[
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + "/" + month + "/" + year);
//]]>
</script>
Insertar Hora mediante un Script en una página web HTML.
En el siguiente enlace podréis comprobar el funcionamiento de los Scripts (Fecha y Hora),en una página web HTML.
Para insertar el Reloj, y la Fecha, en WordPress, solo tienes que copiar los códigos script, en el archivo Header, de tu sitio web de WordPress, antes de la etiqueta </head>.
