it-swarm.com.de

Hinzufügen eines Farbauswahlfelds zur Kategorie

Ich möchte meinen Kategorien ein benutzerdefiniertes Feld hinzufügen, in dem der Benutzer sie farblich kennzeichnen kann. Ich habe das Feld hinzugefügt, möchte aber den eingebauten Colorpicker (entweder tinyMCE oder farbtastic) verwenden, um dem Benutzer eine einfache Möglichkeit zum Auswählen von Farben zu bieten. Ich kann jedoch noch nicht herausfinden, wie die Funktionalität hinzugefügt werden soll. Bisher habe ich Folgendes:

Kategorie Feld Setup

/** Add New Field To Category **/
function extra_category_fields( $tag ) {
    $t_id = $tag->term_id;
    $cat_meta = get_option( "category_$t_id");
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="cat_Image_url"><?php _e('Category Image Url'); ?></label></th>
<td>
<input type="text" name="Cat_meta[bgc]" id="colorinput" size="3" style="width:20%;" value="<?php echo $cat_meta['bgc'] ? $cat_meta['bgc'] : '#fff'; ?>" class="my-color-field" />
<div id="colorpicker"></div><br />
            <span class="description"><?php _e('Can't Think of A Desc Yet, Suggestions?'); ?></span>
                <br />
        </td>
</tr>
<?php
}
add_action ( 'category_add_form_fields', 'extra_category_fields');

/** Save Category Meta **/
function save_extra_category_fileds( $term_id ) {
    if ( isset( $_POST['Cat_meta'] ) ) {
        $t_id = $term_id;
        $cat_meta = get_option( "category_$t_id");
        $cat_keys = array_keys($_POST['Cat_meta']);
            foreach ($cat_keys as $key){
            if (isset($_POST['Cat_meta'][$key])){
                $cat_meta[$key] = $_POST['Cat_meta'][$key];
            }
        }
        //save the option array
        update_option( "category_$t_id", $cat_meta );
    }
}
add_action ( 'edited_category', 'save_extra_category_fileds');

Colorpicker-Skript (Farbtastic) - funktioniert nicht

/** Enqueue Color Picker **/
function farbtastic_scripts() {
  wp_enqueue_script( 'jQuery' );
  wp_enqueue_style( 'farbtastic' );
  wp_enqueue_script( 'farbtastic' );

  ?>
    <script type="text/javascript">

        jQuery(document).ready(function() {
            jQuery('#colorpicker').hide();
            jQuery('#colorpicker').farbtastic("#colorinput");
            jQuery("#colorinput").click(function(){jQuery('#colorpicker').slideToggle()});
        });

    </script>
  <?php
}
add_action( 'admin_enqueue_scripts', 'farbtastic_scripts' );

:: Edit :: Wenn es einfacher ist, habe ich das "Advanced Custom Fields" -Plugin, das eine Colorpicker-Option hat. Ich schaue, ob es einfacher wäre, das zu benutzen.

4
Howdy_McGee

Dies wurde für WordPress 4+ mit der Einführung von Term Meta aktualisiert. Der Code ist stark kommentiert.

:: Meine Funktionen - functions.php ::

Die folgende Funktion dient zum Anzeigen der Farbauswahl auf dem Bildschirm "Neue Kategorie hinzufügen":

/**
 * Add new colorpicker field to "Add new Category" screen
 * - https://developer.wordpress.org/reference/hooks/taxonomy_add_form_fields/
 *
 * @param String $taxonomy
 *
 * @return void
 */
function colorpicker_field_add_new_category( $taxonomy ) {

  ?>

    <div class="form-field term-colorpicker-wrap">
        <label for="term-colorpicker">Category Color</label>
        <input name="_category_color" value="#ffffff" class="colorpicker" id="term-colorpicker" />
        <p>This is the field description where you can tell the user how the color is used in the theme.</p>
    </div>

  <?php

}
add_action( 'category_add_form_fields', 'colorpicker_field_add_new_category' );  // Variable Hook Name

Die folgende Funktion fügt das Farbauswahlfeld zum Bildschirm "Kategorie bearbeiten" hinzu:

/**
 * Add new colopicker field to "Edit Category" screen
 * - https://developer.wordpress.org/reference/hooks/taxonomy_add_form_fields/
 *
 * @param WP_Term_Object $term
 *
 * @return void
 */
function colorpicker_field_edit_category( $term ) {

    $color = get_term_meta( $term->term_id, '_category_color', true );
    $color = ( ! empty( $color ) ) ? "#{$color}" : '#ffffff';

  ?>

    <tr class="form-field term-colorpicker-wrap">
        <th scope="row"><label for="term-colorpicker">Severity Color</label></th>
        <td>
            <input name="_category_color" value="<?php echo $color; ?>" class="colorpicker" id="term-colorpicker" />
            <p class="description">This is the field description where you can tell the user how the color is used in the theme.</p>
        </td>
    </tr>

  <?php


}
add_action( 'category_edit_form_fields', 'colorpicker_field_edit_category' );   // Variable Hook Name

Die folgende Funktion wird den Begriff Meta ohne den # bereinigen und speichern, aber es gibt eine separate Funktion, die ihn mit dem Hash namens sanitize_hex_color() bereinigen wird:

/**
 * Term Metadata - Save Created and Edited Term Metadata
 * - https://developer.wordpress.org/reference/hooks/created_taxonomy/
 * - https://developer.wordpress.org/reference/hooks/edited_taxonomy/
 *
 * @param Integer $term_id
 *
 * @return void
 */
function save_termmeta( $term_id ) {

    // Save term color if possible
    if( isset( $_POST['_category_color'] ) && ! empty( $_POST['_category_color'] ) ) {
        update_term_meta( $term_id, '_category_color', sanitize_hex_color_no_hash( $_POST['_category_color'] ) );
    } else {
        delete_term_meta( $term_id, '_category_color' );
    }

}
add_action( 'created_category', 'save_termmeta' );  // Variable Hook Name
add_action( 'edited_category',  'save_termmeta' );  // Variable Hook Name

Nachdem die Felder hinzugefügt und die Daten gespeichert wurden, müssen wir die Skripte einreihen, mit denen die Farbauswahl eingerichtet wurde. Beachten Sie, dass ich in der ersten Bedingung gegen die Taxonomie teste, auf der ich das Feld zeige.

/**
 * Enqueue colorpicker styles and scripts.
 * - https://developer.wordpress.org/reference/hooks/admin_enqueue_scripts/
 *
 * @return void
 */
function category_colorpicker_enqueue( $taxonomy ) {

    if( null !== ( $screen = get_current_screen() ) && 'edit-category' !== $screen->id ) {
        return;
    }

    // Colorpicker Scripts
    wp_enqueue_script( 'wp-color-picker' );

    // Colorpicker Styles
    wp_enqueue_style( 'wp-color-picker' );

}
add_action( 'admin_enqueue_scripts', 'category_colorpicker_enqueue' );

Zum Schluss müssen wir den Colorpicker initialisieren. Hier habe ich beschlossen, es nur in die Fußzeile zu drucken, aber es kann vorteilhafter sein, dies in eine externe Datei zu packen und es wie ein normales Skript in eine Warteschlange zu stellen.

/**
 * Print javascript to initialize the colorpicker
 * - https://developer.wordpress.org/reference/hooks/admin_print_scripts/
 *
 * @return void
 */
function colorpicker_init_inline() {

    if( null !== ( $screen = get_current_screen() ) && 'edit-category' !== $screen->id ) {
        return;
    }

  ?>

    <script>
        jQuery( document ).ready( function( $ ) {

            $( '.colorpicker' ).wpColorPicker();

        } ); // End Document Ready JQuery
    </script>

  <?php

}
add_action( 'admin_print_scripts', 'colorpicker_init_inline', 20 );
4
Howdy_McGee