DynamicSite
Reference
This is a place where you can quickly find some reference for the my-admin elements.
You can use them in your plugins.
This is a place where you can quickly find some reference for the my-admin elements.
You can use them in your plugins.
| Checkbox | |
|---|---|
| Paragraph |
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. |
| Description |
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. |
if ( ! class_exists( 'WP_List_Table' ) ) {
require_once( ABSPATH . 'my-admin/includes/class-wp-list-table.php' );
}
These are native DynamicSite tabs. Unfortunately they are not supported by JS :(. Fortunately, you can code it yourself!
Markup:
JS:
(function($) {
$(function(){
$('#tabs').tabs();
});
})(jQuery);
That's all folks!
<h2 class="nav-tab-wrapper">
<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #01</a>
<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #02</a>
<a href="javascript:void(0)" class="nav-tab <?php echo $active_tab == 'display_options' ? 'nav-tab-active' : ''; ?>">Tab #03</a>
</h2>
<div class="tabs-content">
<h3>Settings tabs</h3>
<p>
"But I must explain to you how all this mistaken idea of denouncing pleasure and
praising pain was born and I will give you a complete account of the system, and
expound the actual teachings of the great explorer of the truth, the master-builder
of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it
is pleasure, but because those who do not know how to pursue pleasure rationally
encounter consequences that are extremely painful.
</p>
<p>
Nor again is there anyone who loves or pursues or desires to obtain pain of itself,
because it is pain, but because occasionally circumstances occur in which toil and
pain can procure him some great pleasure. To take a trivial example, which of us
ever undertakes laborious physical exercise, except to obtain some advantage from it?
But who has any right to find fault with a man who chooses to enjoy a pleasure that has
no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>
<p>
<a href="javascript:void(0)" target="_blank" class="button button-primary">Save changes</a>
</p>
</div>
| Title | Author | Categories | Tags | Comments | Date | |
|---|---|---|---|---|---|---|
|
“Post #1” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #2” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #3” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #4” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #5” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #6” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #7” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #8” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #9” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
|
“Post #10” is locked
|
|
dummy@emailaddress | Dummy category | No tags |
1 comment
No pending comments
|
Published 2 hours ago |
| Title | Author | Categories | Tags | Comments | Date |
HTML spinner (20x20)
<span class="spinner is-active"></span>
spinner.gif (20x20)
<img src="<?php echo esc_url( get_admin_url() . 'images/spinner.gif' ); ?>" />
loading.gif (16x16)
<img src="<?php echo esc_url( get_admin_url() . 'images/loading.gif' ); ?>" />
wpspin_light.gif (16x16)
<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light.gif' ); ?>" />
loader.gif (31x31)
<img src="<?php echo esc_url( includes_url() . 'js/tinymce/skins/lightgray/img//loader.gif' ); ?>" />
loadingAnimation.gif (416x26)
<img src="<?php echo esc_url( includes_url() . 'js/thickbox/loadingAnimation.gif' ); ?>" />
spinner-2x.gif (40x40)
<img src="<?php echo esc_url( get_admin_url() . 'images/spinner-2x.gif' ); ?>" />
wpspin_light-2x.gif (32x32)
<img src="<?php echo esc_url( get_admin_url() . 'images/wpspin_light-2x.gif' ); ?>" />
Default notice
Default notice
<div class="notice"><p>Default notice</p></div>
Default dismissible notice
<div class="notice is-dismissible"><p>Default dismissible notice</p></div>
Info
Info notice
<div class="notice notice-info"><p>Info notice</p></div>
Info notice dismissible
<div class="notice notice-info is-dismissible"><p>Info notice dismissible</p></div>
Info notice alt
<div class="notice notice-info alt"><p>Info notice alt</p></div>
Success
Success notice
<div class="notice notice-success"><p>Success notice</p></div>
Success notice dismissible
<div class="notice notice-success is-dismissible"><p>Success notice dismissible</p></div>
Success notice alt
<div class="notice notice-success notice-alt"><p>Success notice alt</p></div>
Warning
Warning notice
<div class="notice notice-warning"><p>Warning notice</p></div>
Warning notice dismissible
<div class="notice notice-warning is-dismissible"><p>Warning notice dismissible</p></div>
Warning notice alt
<div class="notice notice-warning notice-alt"><p>Warning notice alt</p></div>
Error
Error notice
<div class="notice notice-error"><p>Error notice</p></div>
Error notice dismissible
<div class="notice notice-error is-dismissible"><p>Error notice dismissible</p></div>
Error notice alt
<div class="notice notice-error notice-alt"><p>Error notice alt</p></div>
Dashicons are over 250 icons, that can cover most, if not all of your needs!
<span class="dashicons dashicons-format-status"></span>
content: "\f130";
GRID Methode
De GRID methode is een van de meest moderne methoden
HTML Code:
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
</div>
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px;
grid-column-gap: 5px;
}
.item {
background: #ce8888;
}
FLEXBOX Methode
De FLEXBOX methode is een andere veel gebruikte methode
HTML Code:
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
</div>
CSS Code:
<style>
.container {
display: flex;
}
.item {
background: #05670A;
flex-basis: 100px;
height: 100px;
margin: 5px;
}
</style>
FLOAT Methode
De FLOAT methode is een andere veel gebruikte methode
HTML Code:
<div class="element">
</div>
<div class="element">
</div>
CSS Code:
<style>
.element {
float: left;
width: 100px;
height: 100px;
background: #ce8888;
margin: 5px
}
</style>
TABLE Methode
De TABLE methode is wat oudere maar goed werkende methode.
HTML Code:
<table class="container">
<tr class="table-row">
<td class="table-cell">
</td>
<td class="table-cell">
</td>
</tr>
</table>
CSS Code:
<style>
.container {
display: table;
width: 20%;
}
.table-row {
display: table-row;
height: 100px;
}
.table-cell {
border: 1px solid;
background: #ce8888;
display: table-cell;
padding: 2px;
}
</style>
This table shows a list of reserved HTML entities with their associated character and description.
| Character | Entity name | Description |
|---|---|---|
| " | " | quotation mark |
| ' | ' | apostrophe |
| & | & | ampersand |
| < | < | less-than |
| > | > | greater-than |
| | non-breaking space | |
| ¡ | ¡ | inverted exclamation mark |
| ¢ | ¢ | cent |
| £ | £ | pound |
| ¤ | ¤ | currency |
| ¥ | ¥ | yen |
| ¦ | ¦ | broken vertical bar |
| § | § | section |
| ¨ | ¨ | spacing diaeresis |
| © | © | copyright |
| ª | ª | feminine ordinal indicator |
| « | « | angle quotation mark (left) |
| ¬ | ¬ | negation |
| | ­ | soft hyphen |
| ® | ® | registered trademark |
| ¯ | ¯ | spacing macron |
| ° | ° | degree |
| ± | ± | plus-or-minus |
| ² | ² | superscript 2 |
| ³ | ³ | superscript 3 |
| ´ | ´ | spacing acute |
| µ | µ | micro |
| ¶ | ¶ | paragraph |
| · | · | middle dot |
| ¸ | ¸ | spacing cedilla |
| ¹ | ¹ | superscript 1 |
| º | º | masculine ordinal indicator |
| » | » | angle quotation mark (right) |
| ¼ | ¼ | fraction 1/4 |
| ½ | ½ | fraction 1/2 |
| ¾ | ¾ | fraction 3/4 |
| ¿ | ¿ | inverted question mark |
| × | × | multiplication |
| ÷ | ÷ | division |
| À | À | capital a, grave accent |
| Á | Á | capital a, acute accent |
| Â | Â | capital a, circumflex accent |
| Ã | Ã | capital a, tilde |
| Ä | Ä | capital a, umlaut mark |
| Å | Å | capital a, ring |
| Æ | Æ | capital ae |
| Ç | Ç | capital c, cedilla |
| È | È | capital e, grave accent |
| É | É | capital e, acute accent |
| Ê | Ê | capital e, circumflex accent |
| Ë | Ë | capital e, umlaut mark |
| Ì | Ì | capital i, grave accent |
| Í | Í | capital i, acute accent |
| Î | Î | capital i, circumflex accent |
| Ï | Ï | capital i, umlaut mark |
| Ð | Ð | capital eth, Icelandic |
| Ñ | Ñ | capital n, tilde |
| Ò | Ò | capital o, grave accent |
| Ó | Ó | capital o, acute accent |
| Ô | Ô | capital o, circumflex accent |
| Õ | Õ | capital o, tilde |
| Ö | Ö | capital o, umlaut mark |
| Ø | Ø | capital o, slash |
| Ù | Ù | capital u, grave accent |
| Ú | Ú | capital u, acute accent |
| Û | Û | capital u, circumflex accent |
| Ü | Ü | capital u, umlaut mark |
| Ý | Ý | capital y, acute accent |
| Þ | Þ | capital THORN, Icelandic |
| ß | ß | small sharp s, German |
| à | à | small a, grave accent |
| á | á | small a, acute accent |
| â | â | small a, circumflex accent |
| ã | ã | small a, tilde |
| ä | ä | small a, umlaut mark |
| å | å | small a, ring |
| æ | æ | small ae |
| ç | ç | small c, cedilla |
| è | è | small e, grave accent |
| é | é | small e, acute accent |
| ê | ê | small e, circumflex accent |
| ë | ë | small e, umlaut mark |
| ì | ì | small i, grave accent |
| í | í | small i, acute accent |
| î | î | small i, circumflex accent |
| ï | ï | small i, umlaut mark |
| ð | ð | small eth, Icelandic |
| ñ | ñ | small n, tilde |
| ò | ò | small o, grave accent |
| ó | ó | small o, acute accent |
| ô | ô | small o, circumflex accent |
| õ | õ | small o, tilde |
| ö | ö | small o, umlaut mark |
| ø | ø | small o, slash |
| ù | ù | small u, grave accent |
| ú | ú | small u, acute accent |
| û | û | small u, circumflex accent |
| ü | ü | small u, umlaut mark |
| ý | ý | small y, acute accent |
| þ | þ | small thorn, Icelandic |
| ÿ | ÿ | small y, umlaut mark |
WooCommerce plugins omzetten naar XonlineShop:
Class:
De class die als basis gebruikt wordt heet niet WooCommerce maar OnlineShop
Deze is gedefinieerd in /xonlineshop/includes/class-woocommerce.php
Vermoedelijk moet de vergelijkbare code als onderstaande aanpassen.
if ( class_exists('WooCommerce') ) { ... } naar if ( class_exists('OnlineShop') ) { ... } ( dus niet ('XonlineShop')
Vertaling:
De vertalig van de plugin zoekt mogelijk naar de installatie van de webshop, je moet daarom het onderstaande wijzigen:
return in_array('woocommerce/woocommerce.php', $active_plugins) ||
array_key_exists('woocommerce/woocommerce.php', $active_plugins) ||
class_exists('WooCommerce');
veranderen in:
return in_array('xonlinesop/load.php', $active_plugins) ||
array_key_exists('woocommerce/woocommerce.php', $active_plugins) ||
class_exists('OnlineShop');
Plugins
Dit onderdeel gaat over het omzetten van (mu)plugins van WordPress naar DynamicSite
CSS en Javascrip laden in plugin/mu-plugin:
Vaak gebeurt het dat css en javascript bestanden niet laden als je een plugin wilt gebruiken als mu-plugin
dat komt omdat de path toewijzing in de code van de plugin niet overeenkomt met het path als je de plugin
in de mu-plugins map hebt gezet.
Met onderstaande methode maakt het niet meer uit of je plugin normaal of mu-plugin is:
Pas je originele code aan, voorbeeld:
wp_enqueue_style( 'dra-admin-css', plugins_url( 'css/admin.css', $this->base_file_path ), array(), self::VERSION, 'all' );
wp_enqueue_script( 'dra-admin-header', plugins_url( 'js/admin-header.js', $this->base_file_path ), array( 'jquery' ), self::VERSION, false );
wp_enqueue_script( 'dra-admin-footer', plugins_url( 'js/admin-footer.js', $this->base_file_path ), array( 'jquery' ), self::VERSION, true );
naar:
wp_enqueue_style('dra-admin-css', get_plugin_file_url('css/admin.css', $this->base_file_path), array(), self::VERSION, 'all');
wp_enqueue_script('dra-admin-header', get_plugin_file_url('js/admin-header.js', $this->base_file_path), array('jquery'), self::VERSION, false);
wp_enqueue_script('dra-admin-footer', get_plugin_file_url('js/admin-footer.js', $this->base_file_path), array('jquery'), self::VERSION, true);
Vertalingen automatisch laden in plugin/mu-plugin:
vervang onderstaande code zodat de vertaling altijd geladen wordt.
load_plugin_textdomain( 'wp-dashboard-notes', false, basename( dirname( __FILE__ ) ) . '/languages' );
door
load_plugin_textdomain('wp-dashboard-notes', false, get_textdomain_languages_path());
Hoe maak je een admin notice die na gelezen en afgevinkt niet meer getoond wordt.
add_action('admin_notices', 'example_admin_notice');
function example_admin_notice() {
global $current_user ;
$user_id = $current_user->ID;
// Check that the user hasn't already clicked to ignore the message
if ( ! get_user_meta($user_id, 'example_ignore_notice') ) {
echo '<div class="updated"><p>';
printf(__('Dit is de tekst die aan de admin getoond wordt'), '?example_nag_ignore=0');
echo "</p></div>";
}
}
Op deze pagina vindt je informatie betreft het bijwerken van deze help site.
je kunt deze informatie gebruiken bij het aanmaken van nieuwe pagina's.
<p> tags </p>
Wanneer je een tekst wilt weergeven zet je deze standaard tussen <p> tags </p>
Als je geen <p> tags </p> gebruikt worden de letters op de pagina kleiner.
Classes voor de <p> tags </p>
Dit is een voorbeeld van hoe je tekst er uit kan zien. ( Zonder tags )
Dit is een voorbeeld van hoe je tekst er uit kan zien.
<p>Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Dit is een voorbeeld van hoe je tekst er uit kan zien.
- Met extra grote boven en onder marge -
<p class="text-subtitle">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Dit is een voorbeeld van hoe je tekst er uit kan zien.
<p class="text-description">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Dit is een voorbeeld van hoe je tekst er uit kan zien.
<p class="medium-text">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Dit is een voorbeeld van hoe je tekst er uit kan zien.
<p class="large-text">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Dit is een voorbeeld van hoe je tekst er uit kan zien.
<p class="text-strong">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Dit is een voorbeeld van hoe je tekst er uit kan zien.
<p class="text-light">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Dit is een voorbeeld van hoe je tekst er uit kan zien.
<p class="text-center">Dit is een voorbeeld van hoe je tekst er uit kan zien.</p>
Enorm Grote Letters
Voor het geval je de behoefte hebt aan hele grote letters....
<h1 class="big-title">BIG TITLE</h1>
DynamicSite Items
Je kunt de meeste items uit deze site ook op de site zelf gebruiken, zo werkt ook esc_url en includes_url en zou je bijvoorbeeld een spinner kunnen weergeven.
<img src="<?php echo esc_url( includes_url() . 'js/tinymce/skins/lightgray/img//loader.gif' ); ?>" />
Horizontale Regel
Een <hr> tag is standaard grijs, maar met class="xxx" kun je dat veranderen.
GrijsHTML Encoderen
Indien je in deze website code wit weergeven kun je dat doen tussen deze tags:
<pre><code class="language-markup">
- YOUR CODE HERE -
</code></pre>
Je kunt encoderen met onderstaand hulpmiddel:
Beveiling met htaccess
Deze website is beveiligd met een loginnaam en wachtwoord, de code hiervoor staat in .htaccess
AuthType Basic
AuthName "restricted area"
# You should be able to to echo out a phpinfo(); to find this path
AuthUserFile /home/xonline/domains/xonline.nl/public_html/dynamicsite/.htpasswd
require valid-user
dynamicsite:$apr1$A/35cejU$GOKu6o.hz8EuKhi8zQngA1
Een nieuw wachtwoord (Beveiligd) kun je genereren via deze tool: Xonline .htpaswd generator
Bootstrap
Ook bootstrap is beschikbaar, je ziet hieronder hoe je deze kunt laden.
Je ziet dat er slechts een paar standaard classes nodig zijn om het uiterlijk te bepalen.
| Character | Entity name | Description |
|---|---|---|
| " | " | quotation mark |
| ÿ | ÿ | small y, umlaut mark |
<link href="wp/my-admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Character</th>
<th>Entity name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>"</td>
<td>&quot;</td>
<td>quotation mark</td>
</tr>
<tr>
<td>ÿ</td>
<td>&yuml;</td>
<td>small y, umlaut mark</td>
</tr>
</tbody>
</table>
</div>
</div>
Font Awesome
Font Awesome kan vanaf de xonline website worden geladen: ( LINK )
<link href="https://xonline.nl/fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="https://xonline.nl/fontawesome/css/brands.css" rel="stylesheet">
<link href="https://xonline.nl/fontawesome/css/solid.css" rel="stylesheet">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa-camera-retro"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Of als simpele weergave waarbij 'fa-2x' staat voor 2x vergroten.
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
All information on this website is for internal use only