I created a class to manage my plugin's settings, this works okay apart from one thing - I would like to hide fields lal_login_text, lal_logout_text and lal_account_text together with their labels generated by add_settings_field if there is icon selected in lal_display_type field. Icon is default, so these fields should be hidden by default, but show up as soon as user selects links from dropdown.
I tried to apply style="display:none" based on selected value in function callbacks, but it worked only on the field, not its label as well and change took place after saving settings, not immediately.
Any help is appreciated.
class login_account_logout_settings {
private $options;
private $settings_page_name;
private $settings_menu_name;
public function __construct() {
$this->settings_page_name = 'login-account-logout';
$this->settings_menu_name = 'Login Account Logout';
// Initialize and register settings.
add_action( 'admin_init', array( $this, 'register_settings' ) );
// Add settings page.
add_action( 'admin_menu', array( $this, 'add_settings_page' ) );
// Add settings link to plugins page.
add_action( 'plugin_action_links_' . plugin_basename( __FILE__ ), array( $this, 'add_settings_link' ) );
}
public function register_settings() {
register_setting( 'lal_settingz', 'lal_settingz', array( $this, 'sanitize' ) );
// ID / title / callback / page
add_settings_section( 'configuration_section', __( 'Configuration', 'login-account-logout' ), array( $this, 'print_section_info' ), $this->settings_page_name );
// ID / title / callback / page / section
add_settings_field( 'lal_display_type', __( 'Display type', 'login-account-logout' ), array( $this, 'lal_display_type_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_login_text', __( 'Login link text', 'login-account-logout' ), array( $this, 'lal_login_text_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_logout_text', __( 'Logout link text', 'login-account-logout' ), array( $this, 'lal_logout_text_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_account_text', __( 'Account link text', 'login-account-logout' ), array( $this, 'lal_account_text_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_position', __( 'Position', 'login-account-logout' ), array( $this, 'lal_position_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_container', __( 'Container selector', 'login-account-logout' ), array( $this, 'lal_container_callback' ), $this->settings_page_name, 'configuration_section' );
}
public function add_settings_page() {
// This page will be under "Settings"
add_options_page(
'Settings Admin', $this->settings_menu_name, 'manage_options', $this->settings_page_name, array( $this, 'create_settings_page' )
);
}
/**
* Get the option that is saved or the default.
*
* @param string $index. The option we want to get.
*/
public function lal_get_settings( $index = false ) {
$defaults = array ( 'lal_display_type' => 'icon', 'lal_login_text' => 'Log in', 'lal_logout_text' => 'Log out',
'lal_account_text' => 'My account', 'lal_position' => 'after', 'lal_container' => 'nav.secondary-navigation' );
$settings = get_option( 'lal_settingz', $defaults );
if ( $index && isset( $settings[ $index ] ) ) {
return $settings[ $index ];
}
return $settings;
}
public function create_settings_page() {
$this->options = $this->lal_get_settings();
?>
<div class="wrap">
<h1>Login Account Logout</h1>
<form method="post" action="options.php">
<?php
// This prints out all hidden setting fields
settings_fields( 'lal_settingz' );
do_settings_sections( $this->settings_page_name );
submit_button();
?>
</form>
</div>
<?php
}
public function add_settings_link( $links ) {
$links = array_merge( array(
'<a href="' . esc_url( admin_url( '/options-general.php?page=' . $this->settings_page_name ) ) . '">' . __( 'Settings' ) . '</a>'
), $links );
return $links;
}
/**
* Sanitize each setting field as needed
*
* @param array $input Contains all settings fields as array keys
*/
public function sanitize( $input ) {
$new_input = array();
if( isset( $input['lal_display_type'] ) )
$new_input['lal_display_type'] = sanitize_text_field( $input['lal_display_type'] );
if( isset( $input['lal_login_text'] ) )
$new_input['lal_login_text'] = sanitize_text_field( $input['lal_login_text'] );
if( isset( $input['lal_logout_text'] ) )
$new_input['lal_logout_text'] = sanitize_text_field( $input['lal_logout_text'] );
if( isset( $input['lal_account_text'] ) )
$new_input['lal_account_text'] = sanitize_text_field( $input['lal_account_text'] );
if( isset( $input['lal_position'] ) )
$new_input['lal_position'] = sanitize_text_field( $input['lal_position'] );
if( isset( $input['lal_container'] ) )
$new_input['lal_container'] = sanitize_text_field( $input['lal_container'] );
return $new_input;
}
/**
* Print the Section text
*/
public function print_section_info() {
return;
// print 'Enter your settings below:';
}
/**
* Get the settings option array and print one of its values
*/
public function lal_display_type_callback() {
$items = array ('icon', 'links');
echo '<select id="lal_display_type" name="lal_settingz[lal_display_type]">';
foreach($items as &$item) {
$selected = (isset( $this->options['lal_display_type'])) && ( $item == $this->options['lal_display_type']) ? 'selected="selected"' : '';
$item = __( $item, 'login-account-logout' );
printf(
'<option value="%1$s" %2$s>%1$s</option>',
esc_attr($item),
$selected
);
}
printf(
'</select>
<p class="description">%1$s</p>',
__( 'Choose between an icon directing to My account page and dynamic login / account / logout links. Icon allows to save screen space and appears immediately even for slow websites. Links offer direct access to logout, but take more space and show as soon as website scripts execute.', 'login-account-logout' )
);
}
public function lal_login_text_callback() {
printf(
'<input type="text" id="lal_login_text" name="lal_settingz[lal_login_text]" value="%1$s" />',
isset( $this->options['lal_login_text'] ) ? esc_attr( $this->options['lal_login_text']) : ''
);
}
public function lal_logout_text_callback() {
printf(
'<input type="text" id="lal_logout_text" name="lal_settingz[lal_logout_text]" value="%1$s" />',
isset( $this->options['lal_logout_text'] ) ? esc_attr( $this->options['lal_logout_text']) : ''
);
}
public function lal_account_text_callback() {
printf(
'<input type="text" id="lal_account_text" name="lal_settingz[lal_account_text]" value="%1$s" />',
isset( $this->options['lal_account_text'] ) ? esc_attr( $this->options['lal_account_text']) : ''
);
}
public function lal_position_callback() {
$items = array ('before', 'after');
echo '<select id="lal_position" name="lal_settingz[lal_position]">';
foreach($items as &$item) {
$selected = (isset( $this->options['lal_position'])) && ( $item == $this->options['lal_position']) ? 'selected="selected"' : '';
$item = __( $item, 'login-account-logout' );
printf(
'<option value="%1$s" %2$s>%1$s</option>',
esc_attr($item),
$selected
);
}
printf(
'</select>
<p class="description">%1$s</p>',
__( 'Choose whether to display icon / links before other elements in container (for example shopping cart) or after them. If container is empty, this setting won\'t make a difference.', 'login-account-logout' )
);
}
public function lal_container_callback() {
printf(
'<input type="text" id="lal_container" name="lal_settingz[lal_container]" value="%1$s" />
<p class="description">%2$s</p>',
isset( $this->options['lal_container'] ) ? esc_attr( $this->options['lal_container']) : '',
__( 'jQuery selector to find an element serving as container for icon / links. All popular and most of less common CSS selectors are valid jQuery selectors.', 'login-account-logout' )
);
}
}
if( is_admin() ) {
$lal_settingz_page = new login_account_logout_settings();
}
I created a class to manage my plugin's settings, this works okay apart from one thing - I would like to hide fields lal_login_text, lal_logout_text and lal_account_text together with their labels generated by add_settings_field if there is icon selected in lal_display_type field. Icon is default, so these fields should be hidden by default, but show up as soon as user selects links from dropdown.
I tried to apply style="display:none" based on selected value in function callbacks, but it worked only on the field, not its label as well and change took place after saving settings, not immediately.
Any help is appreciated.
class login_account_logout_settings {
private $options;
private $settings_page_name;
private $settings_menu_name;
public function __construct() {
$this->settings_page_name = 'login-account-logout';
$this->settings_menu_name = 'Login Account Logout';
// Initialize and register settings.
add_action( 'admin_init', array( $this, 'register_settings' ) );
// Add settings page.
add_action( 'admin_menu', array( $this, 'add_settings_page' ) );
// Add settings link to plugins page.
add_action( 'plugin_action_links_' . plugin_basename( __FILE__ ), array( $this, 'add_settings_link' ) );
}
public function register_settings() {
register_setting( 'lal_settingz', 'lal_settingz', array( $this, 'sanitize' ) );
// ID / title / callback / page
add_settings_section( 'configuration_section', __( 'Configuration', 'login-account-logout' ), array( $this, 'print_section_info' ), $this->settings_page_name );
// ID / title / callback / page / section
add_settings_field( 'lal_display_type', __( 'Display type', 'login-account-logout' ), array( $this, 'lal_display_type_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_login_text', __( 'Login link text', 'login-account-logout' ), array( $this, 'lal_login_text_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_logout_text', __( 'Logout link text', 'login-account-logout' ), array( $this, 'lal_logout_text_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_account_text', __( 'Account link text', 'login-account-logout' ), array( $this, 'lal_account_text_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_position', __( 'Position', 'login-account-logout' ), array( $this, 'lal_position_callback' ), $this->settings_page_name, 'configuration_section' );
add_settings_field( 'lal_container', __( 'Container selector', 'login-account-logout' ), array( $this, 'lal_container_callback' ), $this->settings_page_name, 'configuration_section' );
}
public function add_settings_page() {
// This page will be under "Settings"
add_options_page(
'Settings Admin', $this->settings_menu_name, 'manage_options', $this->settings_page_name, array( $this, 'create_settings_page' )
);
}
/**
* Get the option that is saved or the default.
*
* @param string $index. The option we want to get.
*/
public function lal_get_settings( $index = false ) {
$defaults = array ( 'lal_display_type' => 'icon', 'lal_login_text' => 'Log in', 'lal_logout_text' => 'Log out',
'lal_account_text' => 'My account', 'lal_position' => 'after', 'lal_container' => 'nav.secondary-navigation' );
$settings = get_option( 'lal_settingz', $defaults );
if ( $index && isset( $settings[ $index ] ) ) {
return $settings[ $index ];
}
return $settings;
}
public function create_settings_page() {
$this->options = $this->lal_get_settings();
?>
<div class="wrap">
<h1>Login Account Logout</h1>
<form method="post" action="options.php">
<?php
// This prints out all hidden setting fields
settings_fields( 'lal_settingz' );
do_settings_sections( $this->settings_page_name );
submit_button();
?>
</form>
</div>
<?php
}
public function add_settings_link( $links ) {
$links = array_merge( array(
'<a href="' . esc_url( admin_url( '/options-general.php?page=' . $this->settings_page_name ) ) . '">' . __( 'Settings' ) . '</a>'
), $links );
return $links;
}
/**
* Sanitize each setting field as needed
*
* @param array $input Contains all settings fields as array keys
*/
public function sanitize( $input ) {
$new_input = array();
if( isset( $input['lal_display_type'] ) )
$new_input['lal_display_type'] = sanitize_text_field( $input['lal_display_type'] );
if( isset( $input['lal_login_text'] ) )
$new_input['lal_login_text'] = sanitize_text_field( $input['lal_login_text'] );
if( isset( $input['lal_logout_text'] ) )
$new_input['lal_logout_text'] = sanitize_text_field( $input['lal_logout_text'] );
if( isset( $input['lal_account_text'] ) )
$new_input['lal_account_text'] = sanitize_text_field( $input['lal_account_text'] );
if( isset( $input['lal_position'] ) )
$new_input['lal_position'] = sanitize_text_field( $input['lal_position'] );
if( isset( $input['lal_container'] ) )
$new_input['lal_container'] = sanitize_text_field( $input['lal_container'] );
return $new_input;
}
/**
* Print the Section text
*/
public function print_section_info() {
return;
// print 'Enter your settings below:';
}
/**
* Get the settings option array and print one of its values
*/
public function lal_display_type_callback() {
$items = array ('icon', 'links');
echo '<select id="lal_display_type" name="lal_settingz[lal_display_type]">';
foreach($items as &$item) {
$selected = (isset( $this->options['lal_display_type'])) && ( $item == $this->options['lal_display_type']) ? 'selected="selected"' : '';
$item = __( $item, 'login-account-logout' );
printf(
'<option value="%1$s" %2$s>%1$s</option>',
esc_attr($item),
$selected
);
}
printf(
'</select>
<p class="description">%1$s</p>',
__( 'Choose between an icon directing to My account page and dynamic login / account / logout links. Icon allows to save screen space and appears immediately even for slow websites. Links offer direct access to logout, but take more space and show as soon as website scripts execute.', 'login-account-logout' )
);
}
public function lal_login_text_callback() {
printf(
'<input type="text" id="lal_login_text" name="lal_settingz[lal_login_text]" value="%1$s" />',
isset( $this->options['lal_login_text'] ) ? esc_attr( $this->options['lal_login_text']) : ''
);
}
public function lal_logout_text_callback() {
printf(
'<input type="text" id="lal_logout_text" name="lal_settingz[lal_logout_text]" value="%1$s" />',
isset( $this->options['lal_logout_text'] ) ? esc_attr( $this->options['lal_logout_text']) : ''
);
}
public function lal_account_text_callback() {
printf(
'<input type="text" id="lal_account_text" name="lal_settingz[lal_account_text]" value="%1$s" />',
isset( $this->options['lal_account_text'] ) ? esc_attr( $this->options['lal_account_text']) : ''
);
}
public function lal_position_callback() {
$items = array ('before', 'after');
echo '<select id="lal_position" name="lal_settingz[lal_position]">';
foreach($items as &$item) {
$selected = (isset( $this->options['lal_position'])) && ( $item == $this->options['lal_position']) ? 'selected="selected"' : '';
$item = __( $item, 'login-account-logout' );
printf(
'<option value="%1$s" %2$s>%1$s</option>',
esc_attr($item),
$selected
);
}
printf(
'</select>
<p class="description">%1$s</p>',
__( 'Choose whether to display icon / links before other elements in container (for example shopping cart) or after them. If container is empty, this setting won\'t make a difference.', 'login-account-logout' )
);
}
public function lal_container_callback() {
printf(
'<input type="text" id="lal_container" name="lal_settingz[lal_container]" value="%1$s" />
<p class="description">%2$s</p>',
isset( $this->options['lal_container'] ) ? esc_attr( $this->options['lal_container']) : '',
__( 'jQuery selector to find an element serving as container for icon / links. All popular and most of less common CSS selectors are valid jQuery selectors.', 'login-account-logout' )
);
}
}
if( is_admin() ) {
$lal_settingz_page = new login_account_logout_settings();
}
1 Answer
Reset to default 0I found a solution that works perfectly. add_settings_field accepts an additional argument and I set the class to hidden if it shouldn't be displayed - in this case if the value of my other setting is not "icon". This is PHP, so it works well when the page is loaded:
add_settings_field( 'lal_add_fa', __( 'Icon font', 'login-account-logout' ), array( $this, 'lal_add_fa_callback' ), $this->settings_page_name, 'configuration_section', ( $this->lal_get_settings('lal_display_type') !== 'icon' ? array( 'class' => 'hidden' ) : array() ) );
However, I also needed a dynamic part, when the user changes the setting responsible for showing my other setting. For this, I have a js file enqueued for my plugin's admin page only:
jQuery(document).ready(function($){
$('#lal_display_type').change(function() {
if (this.value === 'icon') {
$('#lal_add_fa').parents().eq(3).show();
} else if (this.value === 'links') {
$('#lal_add_fa').parents().eq(3).hide();
}
});
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745420978a4626960.html
评论列表（0条）