WordPress
add_menu_page ()
Szukaj…
Wprowadzenie
Ta funkcja polega na dodaniu elementu na pasku nawigacyjnym panelu administracyjnego.
Składnia
- add_menu_page ($ page_title, $ menu_title, $ capability, $ menu_slug, $ function, $ icon_url, $ position)
Parametry
Parametr | Detale |
---|---|
$ page_title | (ciąg) Tekst wyświetlany w tagach tytułowych strony po wybraniu menu. |
$ menu_title | (ciąg) Tekst używany w menu. |
zdolność $ | (ciąg) Możliwości wymagane do wyświetlenia tego menu dla użytkownika. |
$ menu_slug | (ciąg) Nazwa ślimaka, do którego odwołuje się to menu (powinna być unikalna dla tego menu). |
funkcja $ | (wywoływalny) (opcjonalnie) Funkcja, która ma zostać wywołana w celu wyświetlenia zawartości tej strony. |
$ icon_url | (ciąg) (opcjonalnie) Adres URL ikony, która ma być używana w tym menu. |
pozycja $ | (int) (opcjonalnie) Pozycja w kolejności menu powinna się pojawić. |
Uwagi
Oto lista domyślnych pozycji (dla pozycji $)
- 2 - Pulpit nawigacyjny
- 4 - Separator
- 5 - posty
- 10 - Media
- 15 - Linki
- 20 - Strony
- 25 - Komentarze
- 59 - Separator
- 60 - Wygląd
- 65 - Wtyczki
- 70 - Użytkownicy
- 75 - Narzędzia
- 80 - Ustawienia
- 99 - Separator
Dodanie elementu „Tytuł strony motywu” do paska nawigacyjnego
Kod
function add_the_theme_page(){
add_menu_page('Theme page title', 'Theme menu label', 'manage_options', 'theme-options', 'page_content', 'dashicons-book-alt');
}
add_action('admin_menu', 'add_the_theme_page');
function page_content(){
echo '<div class="wrap"><h2>Testing</h2></div>';
}
Wynik
Wyjaśnienie
W kodzie stworzyliśmy funkcję o nazwie add_the_theme_page
i użyliśmy add_menu_page
aby dodać element do paska nawigacyjnego. Proszę sprawdzić część parametrów na tej stronie, aby dowiedzieć się o argumentach, które przekazaliśmy. Następnie użyliśmy add_action
aby uruchomić naszą funkcję add_the_theme_page
. Na koniec stworzyliśmy funkcję page_content
do wyświetlania zawartości na stronie.
OOP i jak ładować skrypty / style na stronie menu
<?php
/*
* Plugin Name: Custom Admin Menu
*/
class SO_WP_Menu {
private $plugin_url;
public function __construct() {
$this->plugin_url = plugins_url( '/', __FILE__ );
add_action( 'plugins_loaded', array( $this, 'init' ) );
}
public function init() {
add_action( 'admin_menu', array( $this, 'add_menu' ) );
}
public function add_menu() {
$hook = add_menu_page(
'My Menu', // Title, html meta tag
'<span style="color:#e57300;">My Menu</span>', // Menu title, hardcoded style
'edit_pages', // capability
'dummy-page-slug', // URL
array( $this, 'content' ), // output
null, // icon, uses default
1 // position, showing on top of all others
);
add_action( "admin_print_scripts-$hook", array( $this, 'scripts' ) );
add_action( "admin_print_styles-$hook", array( $this, 'styles' ) );
}
public function content() {
?>
<div id="icon-post" class="icon32"></div>
<h2>Dummy Page</h2>
<p> Lorem ipsum</p>
<?php
}
# Printing directly, could be wp_enqueue_script
public function scripts() {
?><script>alert('My page');</script><?php
}
# Enqueing from a CSS file on plugin directory
public function styles() {
wp_enqueue_style( 'my-menu', $this->plugin_url . 'my-menu.css' );
}
}
new SO_WP_Menu();
Ważne w tym przykładzie jest to, że podczas korzystania z add_menu_page()
zwraca hak, którego można użyć do ukierunkowania naszej strony i załadowania tam Stylów i Skryptów.
Częstym błędem jest kolejkowanie bez kierowania, które rozlewa skrypty i style na /wp-admin
.
Za pomocą OOP możemy przechowywać wspólne zmienne, które będą używane w wewnętrznych metodach.