Cómo agregar selecciones promedio y twee para WordPress (¡por favor gratis!)

En las últimas semanas, hemos agregado la oportunidad de seleccionar texto en nuestro blog y tweet. Si aún no ha superado esta función, pruébelo ahora mismo. ¿Guay, verdad? Uno de nuestros desarrolladores front-end, Catalin Nita, creó esta función para nuestro blog (¡gracias, Cătălin!) Y pensamos en compartirlo hoy, para que pudiera usarla. Así que hoy le presentaré cómo configurarlo y descargar el complemento de forma gratuita al final de la publicación. Cómo funciona si lee publicaciones en Medium, estará familiarizado con esta práctica funcionalidad, lo que hace que los lectores sean más fácil resaltar una serie de palabras y compartirla de inmediato. En Medium, al resaltar el texto, la página muestra una barra de herramientas que le permite twee o comentar las palabras que seleccione.

La función de selección y tweet ofrece a sus lectores una buena manera de compartir sus citas.
La función en nuestro sitio funciona de manera similar. Al hacer doble clic en una palabra o resaltar algunas palabras, se muestra un pequeño icono de Twitter. Al hacer clic en el icono, se iniciará un modo tweet automáticamente, que contiene el texto que seleccionó con un enlace a la publicación. Hemos diseñado esta función para que el icono se muestre arriba del texto resaltado, lo que hace que los lectores sean menos inquietantes. Después de todo, no queremos bloquear ningún texto que desee leer.
Agregar “Seleccionar y Tweet” a su sitio de WordPress la forma más fácil de agregarlo a su sitio. Es desplazarse a la parte inferior del artículo y descargar el complemento tal como está. Puede instalarlo, activar y comenzar de inmediato. Tenga en cuenta que el complemento utiliza clases estándar de WordPress y solo funcionará en una sola publicación. Su tema debe usar nombres de clases estándar, pero si no, el complemento puede no funcionar. Si desea aprender a construir esta función, lea más, codificaremos el complemento desde cero en el resto de este tutorial. Creación de un complemento vacío Cree una carpeta llamada “Seleccione y Tweet” en la carpeta de complementos y coloque Un archivo vacío en él llamado “Select-and-Tweet.php”. En ese archivo, inserte el siguiente contenido: no dude en adaptarse a sus necesidades.
Cargue la idea 220838AA9DD3804A7DEE
Agregar nuestros activos Todo lo que tenemos que hacer es poner algunos activos en nuestro archivo PHP principal. Usaremos una fuente para el icono de Twitter, un archivo CSS y un archivo JavaScript. Cree los siguientes archivos en su directorio de complementos:
select y tweet.css
Selection-and-Tweet.js
Después de haber terminado, descargue este archivo y extraiga al director de su complemento. Esto debería dar lugar a un directorio de fuentes de cuatro archivos. Antes de agregar cualquier contenido a nuestros archivos CSS y JS, pongámoslos en la cola. En el archivo select-y-tweet.php, el siguiente código:
Cargue la idea 220838AA9DD3804A7DEE
Tenga en cuenta que debido a que nuestro JavaScript usará jQuey, me aseguré de que se cargará agregándolo al tercer parámetro. También agregué verdadero como el quinto parámetro para asegurarme de que el script esté cargado en el sótano (no es necesario antes de eso). El descubrimiento del JavaScript esencialmente, queremos mostrar un botón de posición correcta, cuando el usuario selecciona un texto. Un proceso de selección comienza con un evento Mousedown (el usuario presiona el botón del mouse) y termina con un evento de mouse (el usuario libera el botón). Queremos asegurarnos de que no fuera un clic derecho, en cuyo caso se debe mostrar el menú predeterminado del navegador, y que se seleccionan al menos tres caracteres. Esto evita que los clics accidentales dobles lentos o pequeñas selecciones. Primero, escribamos dos funciones de ayuda en las que confiaremos. Una es detectar si un clic fue un clic derecho, el otro devolverá el texto seleccionado. Aquí está el código completo para ambos, además de empacar todo en una llamada lista. Se debe colocar todo el código JavaScript:
Cargue la idea 220838AA9DD3804A7DEE

Sin embargo, listo, es hora de agregar algunas cosas a nuestros dos eventos: mouse-up y mousedown. Aquí está el código completo, incluida la excelente documentación agregada por Catalin:
Cargue la idea 220838AA9DD3804A7DEE
Tenga en cuenta que ambos eventos están vinculados. La idea es que los usuarios se distribuyan de nuestra publicación, no desde la barra lateral, el encabezado y otros lugares, porque simplemente estarían confundidos. Esto mantiene todo en el área de la publicación.
El evento Mousedown es más simple. Las dos primeras líneas sirven para encontrar la posición inicial de la selección. Este valor se utilizará para colocar el botón más tarde. El segundo, pero en esta acción es la eliminación del botón de intercambio, que usa la clase Twtshare. La parte principal del evento de ratón se omite si la longitud del texto seleccionado es menor o igual a 3 caracteres (o si hemos detectado un clic derecho). Si todo va bien, tomamos la posición superior e izquierda del final de la selección. Según esta información, junto con la posición del punto de partida, podemos calcular la posición enfocada del botón. Al agregar. Split [0] Al final, eliminamos todas las cadenas de consulta, ya que generalmente no están deseadas. Si desea mantenerlos o agregar sus propios parámetros de seguimiento, puede hacerlo aquí. Entonces la cadena compartida se reduce a un máximo de 107 caracteres. Probablemente desee agregar otro texto, como el nombre de una cuenta, al final y, por supuesto, el enlace. Si desea agregar la cuenta, agregue algo como st = st + ‘@danielpataki’; Después de que la cuerda se acortó a 107 caracteres. El botón de intercambio se crea (se anexa al cuerpo) utilizando un enlace simple con la clase .twtshare. Finalmente, se posiciona utilizando los valores que nos habíamos dado cuenta anteriormente.
Ejecutar el botón La hoja de estilo es corta y dulce y contiene la declaración de fuentes, algunas reglas para manejar el icono, los estilos básicos para la clase .twtshare y varias filas para la animación. Se explica muy por sí mismo. Aquí está el código completo:
Cargue la idea 220838AA9DD3804A7DEE
Descargue el complemento GRATIS Seleccione y Tweet ¡Eso es!Debe tener el botón para trabajar en su sitio como puede ver, implementar algo útil no debe ser demasiado complicado.Algunas líneas simples de JavaScript y un CSS Dash es todo lo que necesita para crear algo grandioso.Si desea probar el complemento sin escribir todo ese código solo, aquí está el archivo zip del complemento para instalar y activar. Disfrute de la selección y publique en Twitter a todos y agradezca nuevamente a Cătălin por crear esta maravillosa función.