Share
Trabajar con BuddyPress sobre WordPress es una cosa súper emocionante, agrega una nueva dimensión a la plataforma y demuestra un gran potencial.
BuddyPress, al igual que otros complementos, amplía la funcionalidad principal que ofrece WordPress. Aunque es importante, como profesional independiente o empresa, reconocer que BuddyPress, a diferencia de otros complementos, agrega funcionalidad de proporciones épicas..
Este tutorial tiene como objetivo mostrarle cómo demostrar una prueba de concepto de manera rápida y funcional, sin cometer los mejores pecados cardinales..
A lo largo de este tutorial usaremos una combinación de funciones PHP, jQuery y WordPress para extender BuddyPress lo suficiente como para demostrar un concepto..
Trabajando en los perfiles de miembros, sin ningún recurso, agregaremos un enlace que permita a los usuarios visitar un área de marcadores de miembros..
El área de marcadores se rellenará con una lista de marcadores que un miembro ha decidido guardar mientras navega por cualquier sitio habilitado para BuddyPress.
El alcance de los marcadores que se pueden guardar solo se aplicará a las publicaciones de WordPress por ahora, sin embargo, puede seguir desarrollando esto y aplicarlo a otras áreas de un sitio web con WordPress que produzca un enlace permanente..
Estaremos construyendo sobre el bp-default Tema de hoy y creando nuestro propio tema infantil. A continuación se muestra la estructura que deberías haber creado..
style.css - Dentro style.css necesitamos una cantidad mínima de código para permitir la selección de temas a través de wp-admin. Hagamos eso ahora.
/ * Nombre del tema: Descripción del tema del marcador: Tema secundario de bp-default con soporte agregado para los marcadores de miembros. Versión: 1.0 Autor: WPTuts Autor URI: http://wp.tutsplus.org Etiquetas: buddypress Plantilla: bp-default * /
Etiquetas: buddypress notificará a BuddyPress que estamos usando un tema habilitado para BP.
Plantilla: bp-default le indicará a BuddyPress que cuando este tema esté activo para heredar su funcionalidad de la bp-default tema a menos que un archivo de tema haya sido modificado.
Dentro barra lateral.php necesitamos cargar el widget.php.
Accentsconagua
Locate_template (array ('members / single / bookmarks / widget.php'), true); Sigamos adelante y registremos la bookmarks.js archivo, se requerirá en cada página de aquí en adelante. En funciones.php agrega lo siguiente.
function px_bookmark_scripts () if (! is_admin ()) wp_enqueue_script ('px-scripts-functions', get_stylesheet_directory_uri (). '/_inc/js/bookmarks.js', array ('jquery'), '1.0', true ); add_action ('wp_enqueue_scripts', 'px_bookmark_scripts'); wp_enqueue_script acepta 5 parámetros.
wp_head. Si se establece en true, se cargará con wp_footer.
Los navegadores de nuestro sitio podrán agregar o eliminar una publicación de WordPress en sus marcadores haciendo clic en el ancla que dice "Agregar a favoritos" o "Eliminar de marcadores" ubicado al final de cada publicación..
Cuando se haga clic en cualquiera de los dos anclajes, usaremos AJAX y realizaremos una solicitud a un script PHP. Una vez ejecutado actualizaremos el widget de la barra lateral..
En caso de que el navegador haya iniciado sesión como miembro del sitio, pueden guardar las "Listas de marcadores" que se almacenan actualmente dentro de la sesión y se muestran en el widget..
funciones.php...
función px_bookmark_link () global $ post; if (@in_array ($ post-> ID, $ _SESSION ['bookmarks'])): $ content. = 'ID.' "data-post-name =" '. get_the_title ().' "> Eliminar de los marcadores ' ; else: $ content. = 'ID.' "data-post-name =" '. get_the_title ().' "> Agregar a marcadores '; terminara si; devolver $ contenido; add_filter ('the_tags', 'px_bookmark_link'); Esta función se llama en cada iteración de "el bucle" utilizando Añadir filtro y las_tags como nuestro gancho.
Le informamos a WordPress que dentro de esta función queremos acceder a los elementos dentro de $ wp_query y consecuentemente $ post. Esto nos permitirá recuperar La identificación, el título y the_permalink.
Alguna lógica se aplica cuando este código se ejecuta para determinar qué enlace mostrar. Si el usuario ya tiene el elemento dentro de su sesión actual, mostraremos un ancla "Eliminar de marcadores" y viceversa.. in_array () nos permite comprobar esto.
in_array () marcará avisos si error al reportar tiene esa directiva, usamos el @ símbolo para suprimir estos avisos (hacky).
Usando los datos devueltos en $ post Formamos dos anclas para agregar y eliminar marcadores (todos datos atributos importantes aquí) para ser utilizados posteriormente con nuestras llamadas AJAX en bookmarks.js.
Para una referencia completa de los filtros disponibles visite el codex.
Ahora que tenemos nuestro enlace en su lugar, creamos el widget que aparecerá en la barra lateral en todo momento y se llenará o vaciará a pedido..
La imagen de arriba refleja los estados finales del widget en 3 escenarios.
El siguiente bloque de código se coloca dentro de widget.php y anidado dentro del formato HTML.
if ($ _ SESSION ['bookmarks']): foreach ($ _ SESSION ['bookmarks'] como $ key => $ value): $ keys [] = $ key; $ start_count = min ($ keys); endforeach terminara si; para ($ i = $ start_count; $ i < $start_count + count($_SESSION['bookmarks']); $i++) : if($_SESSION['bookmarks'][$i]) : $bookmark = get_post($_SESSION['bookmarks'][$i]); echo '
Cuando se construyó este proyecto, hubo un problema con los datos de la sesión que siguieron apareciendo en la salida. Se estaban eliminando algunos valores pero la clave persistía. Configuración de un $ start_count Más tarde para ser utilizado al imprimir los datos de la sesión solucionó este problema.
Lo importante a tener en cuenta aquí es cómo recuperar elementos de $ _SESSION ['marcadores'] El cual será creado en la siguiente etapa..
En cada iteración utilizamos get_post () para consultar la base de datos de WordPress con los valores enteros almacenados en $ _SESSION ['marcadores']. Lo que devolverá todos los datos legibles humanos que necesitamos.
if (is_user_logged_in ()): // Mostrar el botón GUARDAR else: // Mostrar el mensaje "LOGIN TO SAVE". terminara si; if ($ _ SESSION ['bookmarks']): // Mostrar el botón CLEAR endif;
Esta última pieza de lógica dentro de widget.php determina qué botones y texto se mostrarán junto con el widget dependiendo del estado de la sesión actual y
también si el usuario está conectado o desconectado.
jQuery es impresionante, aquí usaremos el delegar Método y escucha los clics en nuestros anclajes importantes. Comprobaremos si se hace clic en los siguientes elementos.
añadir marcador eliminar marcador borrar marcadores Utilizando hasClass podemos probar en qué elemento se ha hecho clic dentro del método de delegado y servir el deseado AJAX llamada.
Si está incorporando esto en un proyecto más grande, considere usar un pubsub modelo.
var $ bookmark_widget = $ ('# px-bookmarks'), $ bookmark_form = $ ('# px-bookmarks form'), $ bookmark_widget_list = $ ('# # px-bookmarks .current-bookmarks'), $ empty_widget = $ ( '# px-bookmarks p'), $ widget_buttons = $ ('# px-bookmarks .widget-buttons'), $ login_notify = $ ('# px-bookmarks .login-notification'), // Esto debe cambiarse a refleja tu dominio $ ajax_path = 'http://yoursite.com/wp-content/themes/bookmark-theme/members/single/bookmarks/ajax.php'; Primero registre algunas variables para que no estemos "chapoteando en el DOM" demasiado. Todos los selectores de DOM anteriores están ubicados dentro widget.php.
$ (". add-bookmark, .delete-bookmark, .clear-bookmarks"). delegate (esta, 'click', function (e) e.preventDefault ();); Le decimos a jQuery que escuche, haga clic en todas las clases enumeradas y, a través de la función de devolución de llamada, le diremos qué hacer. Las siguientes porciones de código que se agregarán se colocarán directamente después de e.preventDefault ().
Utilizando preventDefault () es una forma más inteligente de anular la acción predeterminada cuando JavaScript está presente. Aquí hay una discusión alrededor preventDefault () en desbordamiento de pila.
Las siguientes porciones de código que se agregarán se colocarán directamente después de e.preventDefault ().
var $ post_id = $ (this) .data ('post-id'), $ post_name = $ (this) .data ('post-name'), $ post_href = $ (this) .attr ('href'), $ que = $ (esto); Una vez que un usuario ha hecho clic en cualquiera de los "anclajes importantes", debemos almacenar los valores de los atributos de datos que se adjuntaron a los anclajes en el Paso 2. Esto nos permitirá enviar y recuperar los datos que deseamos..
El siguiente código puede volverse un poco detallado, ya que mostraremos y esconderemos los elementos según el elemento en el que se haya hecho clic, con ese cursor anterior el código a continuación es el código
Lo mínimo que funcionará sin la estética en mente. Sin embargo, por favor descarga la fuente y mira estas líneas..
if ($ that.hasClass ('add-bookmark')) $ .ajax (url: $ ajax_path + '? method = add', escribe: 'GET', datos: 'post_id =' + $ post_id, éxito: function (returndata) if ($ bookmark_widget_list.children (). length === 0) // Show / hide $ bookmark_widget_list.prepend ('Aquí usamos hasClass para distinguir en qué elemento se hizo clic utilizando jQuery para buscar contra nuestro elemento en el que se hizo clic.
Con base en el resultado configuramos nuestro AJAX llame un poco diferente cada vez. Con el url y datos siendo solicitado y enviado cada vez cambiando ligeramente.
darse cuenta ?metodo = agregar añadido a $ ajax_path. Este es el equivalente de http://site.com/path/to/ajax.php?method=add.
Al agregar un marcador a la sesión actual, el único elemento que debemos pasar a nuestro código PHP es el ID de la publicación que se almacenó en el $ post_id variable.
Cuando jQuery recibe una respuesta exitosa, agregamos ese elemento a la lista de marcadores actual dentro del área del widget como un elemento de la lista. Utilizando $ post_id, $ post_name y $ post_href aquí.
Cuando la página se actualiza el código agregado a widget.php en el paso 3 se iniciará.
En la línea 7 del último fragmento hay una pequeña subrutina dentro del éxito método que determina si hay elementos de la lista presentes en el área del widget. Este es el código anteriormente mencionado, ligeramente detallado, que no hace más que mostrar y ocultar algunos elementos DOM. Se ha eliminado para facilitar la lectura aquí en Wptuts +. Continuando ...
if ($ that.hasClass ('delete-bookmark')) $ .ajax (url: $ ajax_path + '? method = delete', escribe: 'GET', datos: 'post_id =' + $ post_id, éxito: function (returndata) if ($ bookmark_widget_list.children (). length <= 1) // Show / hide $('#bookmark-'+ $post_id).remove(); ); Muy parecido if ($ that.hasClass ('add-bookmark')) Aquí verificamos los elementos en los que se hace clic que tienen la clase de eliminar marcador.
Una vez que esta subrutina ha sido ingresada url en la llamada AJAX se altera ligeramente mediante el envío de una cadena de consulta diferente. A saber ?metodo = borrar.
Cuando se devuelve una respuesta exitosa, eliminamos ese elemento de la lista de los marcadores actuales almacenados en el widget.
Aplicando un poco de lógica de la misma manera que la añadir marcador subrutina para determinar si el elemento eliminado será el elemento final. En base a este resultado, aquí se muestran u ocultan nuevamente los elementos DOM.
if ($ that.hasClass ('clear-bookmarks')) $ .ajax (url: $ ajax_path + '? method = clear', success: function (returndata) // Show / hide $ ('. postmetadata. delete-bookmark '). each (function (index) // Lista de favoritos borrada, establezca los anclajes adjuntos a las publicaciones como predeterminados. $ (this) .removeClass (). addClass (' add-bookmark '). html (' Add to marcadores '););); El fragmento de código final aquí se utiliza para borrar todos los marcadores dentro del widget configurando url consultar la cadena a un método diferente y restablecer cualquier ancla en la página al valor predeterminado "Agregar a marcadores" para reflejar un vacío $ _SESION. Esto se hace utilizando jQuery cada metodo para encontrar todas las ocurrencias de la clase eliminar marcador (ancla adjunta a los mensajes usando Añadir filtro) y cambiando de nuevo a la predeterminadaañadir marcador.
Ahora crearemos el código PHP al que se hace referencia en las llamadas AJAX anteriores, que se utilizará para agregar, eliminar y borrar todos los marcadores de la sesión.
Dentro ajax.php Vamos a crear las siguientes 3 funciones..
añadir marcador()delete_bookmark ()clear_bookmarks ()Primero creamos añadir marcador()
función add_bookmark () $ post_id = $ _GET ['post_id']; if (@! in_array ($ post_id, $ _SESSION ['bookmarks'])): $ _SESSION ['bookmarks'] [] = $ post_id; terminara si;
Primero almacenamos el $ post_id previamente pasado en bookmarks.js vía datos: 'post_id =' + $ post_id.
A continuación usamos el en_array Vuelva a funcionar para determinar si este elemento debe agregarse a la sesión de marcadores..
function delete_bookmark () $ post_id = $ _GET ['post_id']; foreach ($ _ SESSION ['bookmarks'] como $ key => $ value): $ keys [] = $ key; endforeach $ start_count = min ($ keys); if (@in_array ($ post_id, $ _SESSION ['bookmarks'])): para ($ i = $ start_count; $ i < $start_count + count($_SESSION['bookmarks']); $i++) : if($_SESSION['bookmarks'][$i] === $post_id) : unset($_SESSION['bookmarks'][$i]); endif; endfor; endif;
Dentro de delete_bookmark () función de nuevo almacenamos el $ post_id.
Usando la misma técnica para mostrar nuestros marcadores en widget.php una $ start_count está establecido.
A continuación determinamos si el artículo pasó ($ post_id) existe dentro de la sesión de marcadores a través de en_array, y anule cualquier valor que coincida.
función clear_bookmark () session_start (); session_unset (); session_destroy ();
Finalmente, el clear_bookmark () La función destruye todos los datos de la sesión..
Necesitaremos un código más para que este archivo esté completo. Dirígete a la parte superior del archivo y agrega lo siguiente.
session_start (); $ method = $ _GET ['method']; switch ($ method) case "add": add_bookmark (); descanso; caso "eliminar": delete_bookmark (); descanso; caso "claro": clear_bookmark (); descanso;
Usamos session_start () para reanudar la sesión actual. Esto es crucial aquí.
A continuación almacenamos el método que se envía con url en nuestro $ .ajax llamadas.
Basado en el valor actual de $ método llamamos a la función apropiada.
A continuación se enumeran los archivos con los que nos ocuparemos durante el resto de este tutorial..
Dentro home.php agregaremos un elemento de lista a la lista no ordenada dentro del div con un ID de item-nav.
Utilizando la $ pb Global podemos formar rápidamente la URL requerida.
bp global; eco '
Este es uno de los pecados más pequeños que cometemos a lo largo del camino para demostrar una prueba de concepto. Sin embargo, re-iterar la prueba de concepto y el desarrollo rápido es el factor importante aquí.
Si decidiéramos expandir más esta característica, buscaríamos usar los ganchos de BuddyPress.
if ($ _ GET ['component'] == 'bookmarks'): Locate_template (array ('members / single / bookmarks / view.php'), true); Todavía dentro home.php Comprobamos contra la cadena de consulta que nos permitirá servir plantillas personalizadas.
if (! $ _ GET ['action']): Locate_template (array ('members / single / bookmarks / loop.php'), true); elseif ($ _ GET ['action'] == 'save' && is_user_logged_in () && bp_is_home ()): located_template (array ('members / single / bookmarks / save.php'), true); elseif ($ _ GET ['action'] == 'remove' && is_user_logged_in () && bp_is_home ()): Locate_template (array ('members / single / bookmarks / remove.php'), true); terminara si; Dentro ver.php (nuestro cargador de plantillas make-shift) verificamos 2 acciones y si no se ha definido ninguna, mostramos la lista de marcadores guardados.
En el paso 3, se agregó algo de lógica para determinar qué anclas se mostrarán dentro del widget en función del estado actual de $ _SESSION ['marcadores'] y si el usuario ha iniciado sesión o no.
Vamos a crear una pequeña tabla en la base de datos que se utilizará para almacenar una lista de marcadores que corresponden a cada miembro.
DROP TABLE IF EXISTS 'bookmarks'; CREAR TABLA 'marcadores' ('id' int (11) NOT NULL AUTO_INCREMENT, 'user_id' int (11) NOT NULL, 'creado' fecha NOT NULL, texto 'post_ids' NOT NULL, texto 'list_name' NO NULL, CLAVE PRIMARIA ('carné de identidad') ) El MySQL anterior creará una nueva tabla con 5 campos para que almacenemos datos de marcadores.
Una vez creado, es hora de pasar a save.php.
Mientras el usuario accede save.php Presentaremos un formulario con una entrada de texto. Aquí, el usuario deberá proporcionar una etiqueta a la lista de marcadores que le gustaría guardar..
Una vez que se haya proporcionado una etiqueta, almacenaremos cada lista de marcadores como una fila dentro de la base de datos (para su posterior recuperación) y borraremos la sesión actual.
if (! $ _ POST ['px-bookmark-list-name']): // Formulario actual que pide que se le asigne un nombre // Stage 1 elseif ($ _ POST ['px-bookmark-list-name']): / / Etiqueta suministrada de la tienda a la base de datos. // endif de la etapa 2;
Ahora dentro de la etapa 1 de save.php...
// Si se ha enviado el formulario pero no se ha proporcionado ninguna etiqueta presente error if ($ _ POST ['submit'] &&! isset ($ _ POST ['px-bookmark-list-name'])): echo 'Se requiere una etiqueta.
'; terminara si; // Establezca el contador de inicio si ($ _ SESSION ['bookmarks']): foreach ($ _ SESSION ['bookmarks'] como $ key => $ value): $ keys [] = $ key; endforeach $ start_count = min ($ keys); terminara si; // Loopear sobre los elementos y almacenar en campos de formulario ocultos. para ($ i = $ start_count; $ i < $start_count + count($_SESSION['bookmarks']); $i++) : if($_SESSION['bookmarks'][$i] !== NULL) : $bookmark = get_post($_SESSION['bookmarks'][$i]); echo ''; echo ''; echo ''; Echo ''; terminara si; endfor
Primero mostramos un error si no se ha proporcionado ninguna etiqueta.
A continuación utilizamos la misma técnica de widget.php y ajax.php Establecer un contador de inicio e iterar sobre los datos de la sesión..
Finalmente salimos algunos campos de formulario con la ayuda de get_post.
bp global; foreach ($ _ POST ['px-post-id'] como $ valor): $ posts_to_save [] = $ valor; endforeach $ posts = serialize ($ posts_to_save);
Durante la etapa 2 de save.php accedemos a la $ pb global.
Recorremos el $ _POST Los datos y las publicaciones de la tienda se guardarán como una matriz. Esto luego se serializa y almacena en el $ mensajes variable.
$ list_name = $ _POST ['px-bookmark-list-name']; $ query = $ wpdb-> insert ('bookmarks', array ('user_id' => $ bp-> logininuser-> id, 'created' => current_time ('mysql'), 'post_ids' => $ posts, ' list_name '=> $ list_name), array ('% d ', // user_id'% s ', // creado'% s ', // post_ids'% s '// list_name)); A continuación, almacenamos la etiqueta suministrada por el usuario para esta lista de marcadores en una variable y la utilizamos WPDB insertar la fila en la base de datos.
si ($ consulta): echo ''; eco ''; session_start (); session_unset (); session_destroy (); else: echo 'Lista guardada.
'; eco ''; eco ''; terminara si;Hubo un error.
'; eco '
Finalmente, verificamos si la consulta fue exitosa y desarmamos los datos de la sesión, de lo contrario mostraremos un error.
Recuerda, en ver.php cuando no particular acción se establece que vamos a cargar loop.php. En este archivo $ wpdb se utilizará para recuperar y generar listas de marcadores.
bp global; $ displays_user = $ bp-> displays_user-> id; $ bookmark_lists = $ wpdb-> get_results ("SELECT * FROM bookmarks WHERE user_id = $ shown_user ORDER BY id DESC"); Utilizando la $ pb El ID global del perfil que se muestra se almacena en el $ display_user variable.
A continuación, realizamos una consulta en la tabla de marcadores con los datos almacenados. $ display_user como condición de donde.
if ($ bookmark_lists): foreach ($ bookmark_lists as $ bookmark_list): echo $ bookmark_list-> list_name; $ post_ids = unserialize ($ bookmark_list-> post_ids); foreach ($ post_ids como $ post_id): $ bookmark = get_post ($ post_id); echo 'post_name.' "title =" Ver marcador "> '. $ bookmark-> post_title.' '; endforeach; endforeach; endif;
Cuando se devuelven los resultados, se muestran en un bucle sobre los datos y se emiten en consecuencia. Aquí hacemos uso de unserialize para revertir los efectos depublicar por fascículos el cual fue usado para almacenar marcadores previamente.
Podemos hacer una adición más al bloque de código anterior..
if (is_user_logged_in () && bp_is_home ()): echo 'displays_user-> domain.'? component = bookmarks & action = remove & id = '. $ bookmark_list-> id.' "> Delete list '; endif;
Esto agregará un ancla al título de cada lista que al hacer clic pasará una nueva acción de retirar junto con el ID de la lista de marcadores.
Lo que nos lleva a nuestra etapa final ... Eliminar una lista de marcadores. Abrir remove.php y terminemos esto.
if (isset ($ _ GET ['action']) == 'remove' && isset ($ _ GET ['id'])): $ list_id = $ _GET ['id']; bp global; $ user_id = $ bp-> loginin_user-> id; $ query = $ wpdb-> query ("BORRAR DE los marcadores WHERE id = $ list_id AND user_id = $ user_id"); si ($ consulta): echo ''; eco 'Lista eliminada.
'; eco ''; else: echo ''; eco 'Hubo un error.
'; eco ''; terminara si; terminara si; Primero, nos aseguramos de que la acción esté configurada para eliminarse y que haya un ID para construir una pequeña consulta con.
A continuación almacenamos algunos datos de usuario y ejecutamos la consulta. Los usuarios solo deben poder eliminar listas que les pertenecen, usando $ bp-> loginin_user-> id nos ayuda a lograr esto.
Finalmente servimos un mensaje dependiendo del resultado..
En el transcurso de este tutorial se han aplicado varias técnicas. Usando jQuery, PHP en bruto, las convenciones de WordPress y BuddyPress, hemos podido ilustrar una buena característica para agregar a su sitio de red social con WordPress y BuddyPress.
BuddyPress no viene con un administrador de marcadores adjunto a los perfiles de los miembros y no hay un complemento que funcione exactamente como este.
Un administrador de marcadores es un ejemplo, pero esto podría ser cualquier cosa..
El objetivo principal de este tutorial fue ilustrar la rapidez y eficacia con la que puede utilizar BuddyPress para demostrar la prueba de concepto..
Con algunos conocimientos técnicos, esto se podría organizar en una noche sin ningún problema. El compromiso de tiempo es tangible y podría incluirse en un contrato de mantenimiento mensual.
Sin embargo, si un cliente deseara más funciones del administrador de marcadores, como un widget del panel y más funciones en profundidad, estaría entrando en los dominios de un complemento.
Los datos no se han limpiado en este tutorial, así que asegúrese de colocar esto en un entorno del "mundo real", realice una validación previa..
Espero que hayas disfrutado este tutorial y cualquier discrepancia que puedas encontrar, por favor, deja un comentario y haré todo lo posible para ayudarte..
