mystickymenu
Last commit date
mystickymenu.css
12 years ago
mystickymenu.js
12 years ago
mystickymenu.php
12 years ago
readme.txt
12 years ago
screenshot-1.png
12 years ago
screenshot-2.png
12 years ago
mystickymenu.php
401 lines
| 1 | <?php |
| 2 | /* |
| 3 | Plugin Name: myStickymenu |
| 4 | Plugin URI: http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269 |
| 5 | Description: Simple sticky (fixed on top) menu implementation for default Twentythirteen navigation menu. For other themes, after install go to Settings / myStickymenu and change Sticky Class to .your_navbar_class or #your_navbar_id. |
| 6 | Version: 1.4 |
| 7 | Author: m.r.d.a |
| 8 | License: GPLv2 or later |
| 9 | */ |
| 10 | // Block direct acess to the file |
| 11 | defined('ABSPATH') or die("Cannot access pages directly."); |
| 12 | |
| 13 | // Add plugin admin settings by Otto |
| 14 | class MyStickyMenuPage |
| 15 | { |
| 16 | /** |
| 17 | * Holds the values to be used in the fields callbacks |
| 18 | */ |
| 19 | private $options; |
| 20 | |
| 21 | /** |
| 22 | * Start up |
| 23 | */ |
| 24 | public function __construct() |
| 25 | { |
| 26 | add_action( 'admin_menu', array( $this, 'add_plugin_page' ) ); |
| 27 | add_action( 'admin_init', array( $this, 'page_init' ) ); |
| 28 | add_action( 'admin_init', array( $this, 'mysticky_default_options' ) ); |
| 29 | } |
| 30 | |
| 31 | /** |
| 32 | * Add options page |
| 33 | */ |
| 34 | public function add_plugin_page() |
| 35 | { |
| 36 | // This page will be under "Settings" |
| 37 | |
| 38 | add_options_page( |
| 39 | 'Settings Admin', |
| 40 | 'myStickymenu', |
| 41 | 'manage_options', |
| 42 | 'my-stickymenu-settings', |
| 43 | array( $this, 'create_admin_page' ) |
| 44 | ); |
| 45 | } |
| 46 | |
| 47 | /** |
| 48 | * Options page callback |
| 49 | */ |
| 50 | public function create_admin_page() |
| 51 | { |
| 52 | // Set class property |
| 53 | $this->options = get_option( 'mysticky_option_name'); |
| 54 | ?> |
| 55 | <div class="wrap"> |
| 56 | <?php screen_icon(); ?> |
| 57 | <h2>myStickymenu Settings</h2> |
| 58 | <form method="post" action="options.php"> |
| 59 | <?php |
| 60 | // This prints out all hidden setting fields |
| 61 | settings_fields( 'mysticky_option_group' ); |
| 62 | do_settings_sections( 'my-stickymenu-settings' ); |
| 63 | submit_button(); |
| 64 | ?> |
| 65 | </form> |
| 66 | </div> |
| 67 | <?php |
| 68 | } |
| 69 | |
| 70 | /** |
| 71 | * Load Defaults |
| 72 | */ |
| 73 | public function mysticky_default_options() { |
| 74 | |
| 75 | global $options; |
| 76 | |
| 77 | if ( false === get_option('mysticky_option_name') ) { |
| 78 | |
| 79 | $default = array( |
| 80 | |
| 81 | 'mysticky_class_selector' => '.navbar', |
| 82 | 'myfixed_zindex' => '1000000', |
| 83 | 'myfixed_width' => '100%', |
| 84 | 'myfixed_bgcolor' => '#F39A30', |
| 85 | 'myfixed_opacity' => '95', |
| 86 | 'myfixed_transition_time' => '0.3', |
| 87 | 'myfixed_fade' => false, |
| 88 | 'myfixed_disable_small_screen' => false, |
| 89 | 'myfixed_disable_admin_bar' => false |
| 90 | |
| 91 | ); |
| 92 | |
| 93 | add_option( 'mysticky_option_name', $default ); |
| 94 | } |
| 95 | } |
| 96 | |
| 97 | /** |
| 98 | * Register and add settings |
| 99 | */ |
| 100 | public function page_init() |
| 101 | { |
| 102 | register_setting( |
| 103 | 'mysticky_option_group', // Option group |
| 104 | 'mysticky_option_name', // Option name |
| 105 | array( $this, 'sanitize' ) // Sanitize |
| 106 | ); |
| 107 | |
| 108 | add_settings_field( $id, $title, $callback, $page, $section = 'default', $args = array() ); |
| 109 | |
| 110 | add_settings_section( |
| 111 | 'setting_section_id', // ID |
| 112 | 'myStickymenu Options', // Title |
| 113 | array( $this, 'print_section_info' ), // Callback |
| 114 | 'my-stickymenu-settings' // Page |
| 115 | ); |
| 116 | |
| 117 | add_settings_field( |
| 118 | 'mysticky_class_selector', // ID |
| 119 | 'Sticky Class', // Title |
| 120 | array( $this, 'mysticky_class_selector_callback' ), // Callback |
| 121 | 'my-stickymenu-settings', // Page |
| 122 | 'setting_section_id' // Section |
| 123 | ); |
| 124 | |
| 125 | add_settings_field( |
| 126 | 'myfixed_zindex', |
| 127 | 'Sticky z-index', |
| 128 | array( $this, 'myfixed_zindex_callback' ), |
| 129 | 'my-stickymenu-settings', |
| 130 | 'setting_section_id' |
| 131 | ); |
| 132 | |
| 133 | add_settings_field( |
| 134 | 'myfixed_width', |
| 135 | 'Sticky Width', |
| 136 | array( $this, 'myfixed_width_callback' ), |
| 137 | 'my-stickymenu-settings', |
| 138 | 'setting_section_id' |
| 139 | ); |
| 140 | |
| 141 | add_settings_field( |
| 142 | 'myfixed_bgcolor', |
| 143 | 'Sticky Background Color', |
| 144 | array( $this, 'myfixed_bgcolor_callback' ), |
| 145 | 'my-stickymenu-settings', |
| 146 | 'setting_section_id' |
| 147 | ); |
| 148 | |
| 149 | add_settings_field( |
| 150 | 'myfixed_opacity', |
| 151 | 'Sticky Opacity', |
| 152 | array( $this, 'myfixed_opacity_callback' ), |
| 153 | 'my-stickymenu-settings', |
| 154 | 'setting_section_id' |
| 155 | ); |
| 156 | |
| 157 | add_settings_field( |
| 158 | 'myfixed_transition_time', |
| 159 | 'Sticky Transition Time', |
| 160 | array( $this, 'myfixed_transition_time_callback' ), |
| 161 | 'my-stickymenu-settings', |
| 162 | 'setting_section_id' |
| 163 | ); |
| 164 | add_settings_field( |
| 165 | 'myfixed_fade', |
| 166 | 'Fade or slide effect', |
| 167 | array( $this, 'myfixed_fade_callback' ), |
| 168 | 'my-stickymenu-settings', |
| 169 | 'setting_section_id' |
| 170 | ); |
| 171 | add_settings_field( |
| 172 | 'myfixed_disable_small_screen', |
| 173 | 'Enable at Small Screen Sizes', |
| 174 | array( $this, 'myfixed_disable_small_screen_callback' ), |
| 175 | 'my-stickymenu-settings', |
| 176 | 'setting_section_id' |
| 177 | ); |
| 178 | add_settings_field( |
| 179 | 'myfixed_disable_admin_bar', |
| 180 | 'Remove CSS Rules for Static Admin Bar while Sticky', |
| 181 | array( $this, 'myfixed_disable_admin_bar_callback' ), |
| 182 | 'my-stickymenu-settings', |
| 183 | 'setting_section_id' |
| 184 | ); |
| 185 | } |
| 186 | |
| 187 | /** |
| 188 | * Sanitize each setting field as needed |
| 189 | * |
| 190 | * @param array $input Contains all settings fields as array keys |
| 191 | */ |
| 192 | public function sanitize( $input ) |
| 193 | { |
| 194 | $new_input = array(); |
| 195 | if( isset( $input['mysticky_class_selector'] ) ) |
| 196 | $new_input['mysticky_class_selector'] = sanitize_text_field( $input['mysticky_class_selector'] ); |
| 197 | |
| 198 | if( isset( $input['myfixed_zindex'] ) ) |
| 199 | $new_input['myfixed_zindex'] = absint( $input['myfixed_zindex'] ); |
| 200 | |
| 201 | if( isset( $input['myfixed_width'] ) ) |
| 202 | $new_input['myfixed_width'] = sanitize_text_field( $input['myfixed_width'] ); |
| 203 | |
| 204 | if( isset( $input['myfixed_bgcolor'] ) ) |
| 205 | $new_input['myfixed_bgcolor'] = sanitize_text_field( $input['myfixed_bgcolor'] ); |
| 206 | |
| 207 | if( isset( $input['myfixed_opacity'] ) ) |
| 208 | $new_input['myfixed_opacity'] = sanitize_text_field( $input['myfixed_opacity'] ); |
| 209 | |
| 210 | if( isset( $input['myfixed_transition_time'] ) ) |
| 211 | $new_input['myfixed_transition_time'] = sanitize_text_field( $input['myfixed_transition_time'] ); |
| 212 | |
| 213 | if( isset( $input['myfixed_fade'] ) ) |
| 214 | $new_input['myfixed_fade'] = sanitize_text_field( $input['myfixed_fade'] ); |
| 215 | |
| 216 | if( isset( $input['myfixed_disable_small_screen'] ) ) |
| 217 | $new_input['myfixed_disable_small_screen'] = sanitize_text_field( $input['myfixed_disable_small_screen'] ); |
| 218 | |
| 219 | if( isset( $input['myfixed_disable_admin_bar'] ) ) |
| 220 | $new_input['myfixed_disable_admin_bar'] = sanitize_text_field( $input['myfixed_disable_admin_bar'] ); |
| 221 | |
| 222 | return $new_input; |
| 223 | } |
| 224 | |
| 225 | /** |
| 226 | * Print the Section text |
| 227 | */ |
| 228 | public function print_section_info() |
| 229 | { |
| 230 | print 'Change myStickymenu options to suite your needs. Default plugin settings work for Twenty Thirteen theme. For other themes you will probably need to change sticky class, please note that some options may be overriden by your theme css. Use .myfixed class in theme or theme child stylesheet for sticky menu if you need extra css settings.'; |
| 231 | } |
| 232 | |
| 233 | /** |
| 234 | * Get the settings option array and print one of its values |
| 235 | */ |
| 236 | public function mysticky_class_selector_callback() |
| 237 | { |
| 238 | printf( |
| 239 | '<input type="text" id="mysticky_class_selector" name="mysticky_option_name[mysticky_class_selector]" value="%s" /> .navbar for Twenty Thirteen template, for other templates inspect your code to find apropriate menu/navigation bar class or id.', |
| 240 | isset( $this->options['mysticky_class_selector'] ) ? esc_attr( $this->options['mysticky_class_selector']) : '' |
| 241 | ); |
| 242 | } |
| 243 | |
| 244 | public function myfixed_zindex_callback() |
| 245 | { |
| 246 | printf( |
| 247 | '<input type="text" id="myfixed_zindex" name="mysticky_option_name[myfixed_zindex]" value="%s" /> sticky z-index, default 1000000', |
| 248 | isset( $this->options['myfixed_zindex'] ) ? esc_attr( $this->options['myfixed_zindex']) : '' |
| 249 | ); |
| 250 | } |
| 251 | |
| 252 | public function myfixed_width_callback() |
| 253 | { |
| 254 | printf( |
| 255 | '<input type="text" id="myfixed_width" name="mysticky_option_name[myfixed_width]" value="%s" /> sticky width in px or percentage' , |
| 256 | isset( $this->options['myfixed_width'] ) ? esc_attr( $this->options['myfixed_width']) : '' |
| 257 | ); |
| 258 | } |
| 259 | |
| 260 | public function myfixed_bgcolor_callback() |
| 261 | { |
| 262 | printf( |
| 263 | '<input type="text" id="myfixed_bgcolor" name="mysticky_option_name[myfixed_bgcolor]" value="%s" /> default #F39A30' , |
| 264 | isset( $this->options['myfixed_bgcolor'] ) ? esc_attr( $this->options['myfixed_bgcolor']) : '' |
| 265 | ); |
| 266 | } |
| 267 | |
| 268 | public function myfixed_opacity_callback() |
| 269 | { |
| 270 | printf( |
| 271 | '<input type="text" id="myfixed_opacity" name="mysticky_option_name[myfixed_opacity]" value="%s" /> numbers 1-100, default 95', |
| 272 | isset( $this->options['myfixed_opacity'] ) ? esc_attr( $this->options['myfixed_opacity']) : '' |
| 273 | ); |
| 274 | } |
| 275 | |
| 276 | public function myfixed_transition_time_callback() |
| 277 | { |
| 278 | printf( |
| 279 | '<input type="text" id="myfixed_transition_time" name="mysticky_option_name[myfixed_transition_time]" value="%s" /> in seconds, default 0.3', |
| 280 | isset( $this->options['myfixed_transition_time'] ) ? esc_attr( $this->options['myfixed_transition_time']) : '' |
| 281 | ); |
| 282 | } |
| 283 | |
| 284 | public function myfixed_fade_callback() |
| 285 | { |
| 286 | printf( |
| 287 | '<input id="%1$s" name="mysticky_option_name[myfixed_fade]" type="checkbox" %2$s /> Checked is fade, unchecked is slide.', |
| 288 | 'myfixed_fade', |
| 289 | checked( isset( $this->options['myfixed_fade'] ), true, false ) |
| 290 | ); |
| 291 | } |
| 292 | |
| 293 | public function myfixed_disable_small_screen_callback() |
| 294 | { |
| 295 | printf( |
| 296 | '<input id="%1$s" name="mysticky_option_name[myfixed_disable_small_screen]" type="checkbox" %2$s /> Enable mysticky menu on small resolutions, less than 359px, default unchecked.', |
| 297 | 'myfixed_disable_small_screen', |
| 298 | checked( isset( $this->options['myfixed_disable_small_screen'] ), true, false ) |
| 299 | ); |
| 300 | } |
| 301 | public function myfixed_disable_admin_bar_callback() |
| 302 | { |
| 303 | printf( |
| 304 | '<input id="%1$s" name="mysticky_option_name[myfixed_disable_admin_bar]" type="checkbox" %2$s /> Select this only if your theme does not show fixed admin bar on frontpage, default unchecked.', |
| 305 | 'myfixed_disable_admin_bar', |
| 306 | checked( isset( $this->options['myfixed_disable_admin_bar'] ), true, false ) |
| 307 | ); |
| 308 | } |
| 309 | } |
| 310 | |
| 311 | if( is_admin() ) |
| 312 | $my_settings_page = new MyStickyMenuPage(); |
| 313 | |
| 314 | // end plugin admin settings |
| 315 | |
| 316 | |
| 317 | // Remove default option for more link that jumps at the midle of page and its covered by menu |
| 318 | |
| 319 | function mysticky_remove_more_jump_link($link) { |
| 320 | $offset = strpos($link, '#more-'); |
| 321 | if ($offset) { |
| 322 | $end = strpos($link, '"',$offset); |
| 323 | } |
| 324 | if ($end) { |
| 325 | $link = substr_replace($link, '', $offset, $end-$offset); |
| 326 | } |
| 327 | return $link; |
| 328 | } |
| 329 | add_filter('the_content_more_link', 'mysticky_remove_more_jump_link'); |
| 330 | |
| 331 | // Create style from options |
| 332 | |
| 333 | function mysticky_build_stylesheet_content() { |
| 334 | $mysticky_options = get_option( 'mysticky_option_name' ); |
| 335 | echo |
| 336 | '<style type="text/css">'; |
| 337 | if ($mysticky_options ['myfixed_disable_admin_bar'] == false ){ |
| 338 | echo |
| 339 | ' #wpadminbar { position: absolute !important; top: 0px !important;} |
| 340 | '; |
| 341 | } |
| 342 | echo |
| 343 | '.myfixed { |
| 344 | position: fixed!important; |
| 345 | top: 0px!important; |
| 346 | left: 0px!important; |
| 347 | margin-top: 0px!important; |
| 348 | z-index: '. $mysticky_options ['myfixed_zindex'] .'; |
| 349 | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' . $mysticky_options ['myfixed_opacity'] . ')"; |
| 350 | filter: alpha(opacity=' . $mysticky_options ['myfixed_opacity'] . '); |
| 351 | opacity:.' . $mysticky_options ['myfixed_opacity'] . '; |
| 352 | '; |
| 353 | if ($mysticky_options ['myfixed_width'] >= 1 ){ |
| 354 | echo |
| 355 | ' width:' . $mysticky_options ['myfixed_width'] . '!important; |
| 356 | |
| 357 | '; |
| 358 | } |
| 359 | echo |
| 360 | ' background-color: ' . $mysticky_options ['myfixed_bgcolor'] . '!important; |
| 361 | -webkit-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's; |
| 362 | -moz-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's; |
| 363 | -o-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's; |
| 364 | transition: ' . $mysticky_options ['myfixed_transition_time'] . 's; |
| 365 | } |
| 366 | '; |
| 367 | if ($mysticky_options ['myfixed_disable_small_screen'] == false ){ |
| 368 | echo |
| 369 | '@media (max-width: 359px) {.myfixed {position: static!important;}} |
| 370 | '; |
| 371 | } |
| 372 | echo |
| 373 | '#mysticky_wrap { width:100%; } |
| 374 | '; |
| 375 | |
| 376 | if ($mysticky_options ['myfixed_fade'] == false ){ |
| 377 | echo |
| 378 | ''. $mysticky_options ['mysticky_class_selector'] . '{ top: -100px; width:100%; position: static; max-width: 100% !important; }'; |
| 379 | } |
| 380 | echo '</style> |
| 381 | '; |
| 382 | } |
| 383 | add_action('wp_head', 'mysticky_build_stylesheet_content'); |
| 384 | |
| 385 | |
| 386 | function mystickymenu_script() { |
| 387 | |
| 388 | $mysticky_options = get_option( 'mysticky_option_name' ); |
| 389 | |
| 390 | // Register scripts |
| 391 | wp_register_script('mystickymenu', WP_PLUGIN_URL. '/mystickymenu/mystickymenu.js', false,'1.0.0', true); |
| 392 | wp_enqueue_script( 'mystickymenu' ); |
| 393 | |
| 394 | // Localize mystickymenu.js script with myStickymenu options |
| 395 | $mysticky_translation_array = array( 'mysticky_string' => $mysticky_options['mysticky_class_selector'] ); |
| 396 | |
| 397 | wp_localize_script( 'mystickymenu', 'mysticky_name', $mysticky_translation_array ); |
| 398 | } |
| 399 | |
| 400 | add_action( 'wp_enqueue_scripts', 'mystickymenu_script' ); |
| 401 | ?> |