Diseñador Web y Asesor

Cómo Crear un Buscador de Snippets en WordPress: Guía Paso a Paso

Aprende a implementar un buscador de snippets en WordPress para encontrar funciones rápidamente.

Tabla de Contenido

Si trabajas con WordPress y necesitas encontrar fragmentos de código (snippets) rápidamente, este tutorial te mostrará cómo crear un Buscador de Snippets directamente en el panel de administración. Este plugin te permitirá buscar funciones específicas dentro de tus snippets almacenados en la base de datos.

Código:

add_action("admin_menu",  function() {
  add_menu_page(
    "Snippet Finder",
    "Snippet Finder",
    "manage_options",
    "fault-finder",
    "faulty_snippet_finder_page",
    "dashicons-superhero",
    2
  );
});

function faulty_snippet_finder_page() {
  ?>
  <div class="wrap">
    <h1 style="    padding-bottom: 3rem;">Buscador de Snippet</h1>
    <form method="post" width="100%" style="display: flex; flex-direction: column;">
      <textarea id="fault-finder-input" 
		name="fault_finder_input" rows="2" width="100%" required autofocus
		placeholder="Escribe o pega la función o el código para encontrarlo aquí"
	  ><?php echo isset($_POST['fault_finder_input']) ? sanitize_text_field($_POST['fault_finder_input']) : ""; ?></textarea><br>
      <input type="submit" name="submit_fault_finder" class="button button-primary" value="Buscar">
    </form>
    <?php
    if( isset($_POST['submit_fault_finder']) && !empty($_POST['fault_finder_input']) ) {
      global $wpdb;
      $table_name = $wpdb->prefix . "snippets";
      $faulty_function_name = $_POST['fault_finder_input'];
      $results = $wpdb->get_results("SELECT * FROM $table_name WHERE code LIKE '%$faulty_function_name%'");
      if(count($results) > 0) {
        ?>
        <table width="100%" style="margin-top: 2em">
          <thead>
            <tr style="border: 1px solid black">
              <th>ID</th>
              <th>Número de Linea</th>
              <th>Nombre</th>
              <th>Editar Link</th>
            </tr>
          </thead>			
		<tbody>
      <?php
      foreach($results as $result) {
        $lines = explode("\n", $result->code);
        $line_number = 0;
        foreach($lines as $line) {
          $line_number++;
          if(strpos($line, $faulty_function_name) !== false) {
            break;
          }
        }
        ?>
        <tr>
          <td><center><?php echo $result->id; ?></center></td>
          <td><center><?php echo $line_number; ?></center></td>
          <td><?php echo !empty($result->name) ? $result->name : "Untitled #" . $result->id ; ?></td>
          <td><a href="admin.php?page=edit-snippet&id=<?php echo $result->id; ?>"><center>Editar</center></a></td>
        </tr>
        <?php
      }
      ?>
    </tbody>
        </table>
        <?php
      } else {
        echo "<div style='display: flex; margin-top: 1em; align-items: center;'><b>No snippets found containing:</b>
		<pre style='margin-left: 5px;'>$faulty_function_name</pre></div>";
      }
    }
    ?>
  </div>
  <style>
	  input.button.button-primary {    
		padding: .5rem;
		border-radius: 8px;
		border: 2px solid #666;
	  }
  </style>

  <?php
}

Procesamiento de la Búsqueda

  • Consulta SQL: Busca en la tabla wp_snippets (asumiendo que usas un plugin como Code Snippets).
  • Resultados: Muestra una tabla con ID, línea del código, nombre del snippet y enlace para editar.

Conclusión

Este buscador de snippets es útil para desarrolladores que trabajan con múltiples fragmentos de código en WordPress. Puedes personalizarlo para adaptarlo a tus necesidades, como buscar en otras tablas o mejorar el diseño.