N\u00e4r jag satte mig f\u00f6r att b\u00f6rja det h\u00e4r inl\u00e4gget, planerade jag att skriva n\u00e5got mycket mer involverat \u00e4n vad jag ska dela med mig av. Till att b\u00f6rja med ville jag g\u00e5 igenom en av tv\u00e5 saker:<\/p>\n
Den f\u00f6rsta skulle vara att fokusera p\u00e5 en m\u00e4ngd andra saker jag har pratat om, att knyta ihop dem alla och ha en definitiv referens. Men det h\u00e4r \u00e4r n\u00e5got som jag vill ta tid att s\u00e4tta ihop f\u00f6r att se till att det g\u00f6rs r\u00e4tt.<\/p>\n
Den andra \u00e4r en som jag tycker \u00e4r viktig men jag \u00e4r i lite av en \u00f6verg\u00e5ngsfas med n\u00e5gra av mina egna verktyg. Tills det \u00e4r gjort vill jag helst inte skriva om det.<\/p>\n
\u00c4nd\u00e5 finns det alltid n\u00e5got att t\u00e4cka, eller hur? S\u00e5 idag har jag valt n\u00e5got enklare: Att bryta ner anv\u00e4ndningen av klasser, mallar och delar i WordPress-plugins med ett enkelt exempel.<\/p>\n
F\u00f6r just detta \u00e4mne \u00e4r en omedelbar fr\u00e5ga som kan komma att t\u00e4nka p\u00e5 enkel: Varf\u00f6r bry sig om att prata om detta?<\/p>\n
Eftersom det \u00e4r 2018 och vi ser fortfarande en grov blandning av PHP, CSS, uppm\u00e4rkning och JavaScript i en enda fil. Detta \u00e4r inte f\u00f6r att sl\u00e5 p\u00e5 andra tekniker som g\u00f6r detta som standard (som React). Jag pratar specifikt om WordPress-plugins och att skriva underh\u00e5llbar kod p\u00e5 ett s\u00e5dant s\u00e4tt att det \u00e4r l\u00e4tt att [uppenbarligen] underh\u00e5lla, skriva och l\u00e4sa.<\/p>\n
L\u00e5t oss s\u00e4ga att du arbetar p\u00e5 en undermenysida f\u00f6r n\u00e5got som kommer att visas under en anpassad meny. Du registrerar din sida<\/a> med WordPress API:<\/p>\n Men n\u00e4r du st\u00e4ller in en \u00e5teruppringningsfunktion f\u00f6r att visa sidan, anv\u00e4nder du inte<\/strong> funktionen f\u00f6r att blanda alla olika spr\u00e5k tillsammans. Ist\u00e4llet anv\u00e4nder du den f\u00f6r att inkludera en fil.<\/a><\/strong><\/p>\n Observera att i filen ovan refererar jag till en egenskap $this->pluginPath<\/strong>. Detta \u00e4r inst\u00e4llt i konstruktorn f\u00f6r klassen s\u00e5 att jag enkelt kan komma \u00e5t roten av plugin.<\/p>\n Hur som helst, hur kan den h\u00e4r filen se ut?<\/p>\n I det h\u00e4r fallet antar jag att din mall \u00e4r det som kommer att ge information till anv\u00e4ndaren och kommer att beg\u00e4ra deras input. Den partiella kommer att vara ansvarig f\u00f6r att visa ett framg\u00e5ngs-, fel- eller varningsmeddelande f\u00f6r anv\u00e4ndaren.<\/p>\n F\u00f6r att g\u00f6ra det enkelt kommer jag att h\u00e5lla b\u00e5de mallen och den partiella s\u00e5 smal som m\u00f6jligt. I det h\u00e4r fallet, anta att vi ska rendera en sida, be anv\u00e4ndaren att spara ett v\u00e4rde, och om v\u00e4rdet sparas framg\u00e5ngsrikt (och d\u00e4rmed finns i tabellen wp_options<\/strong> ), visar vi framg\u00e5ngsmeddelandet.<\/p>\n Detta betyder:<\/p>\n Ta en titt p\u00e5 koden f\u00f6r mallen nedan:<\/a><\/strong><\/p>\n L\u00e4gg m\u00e4rke till att, ja, den har en ing\u00e5ng, en spara-knapp och en nonce som alla \u00e4r viktiga (men utanf\u00f6r ramen f\u00f6r detta inl\u00e4gg) f\u00f6r att spara information.<\/p>\n Men l\u00e4gg ocks\u00e5 m\u00e4rke till att den har en hj\u00e4lpfunktion som jag anv\u00e4nder f\u00f6r att kontrollera f\u00f6rekomsten av framg\u00e5ngsrikt sparande av information. Denna funktion finns i samma klass som ansvarar f\u00f6r att rendera mallen.<\/p>\n Det ser ut ungef\u00e4r s\u00e5 h\u00e4r:<\/a><\/strong><\/p>\n<?php\n\npublic function addMenuPage()\n{\n add_menu_page(\n 'Acme Menu',\n 'Acme Menu',\n 'manage_options',\n 'acme-custom-menu',\n array($this, 'display'),\n 'dashicons-dashboard',\n 30\n );\n\n add_submenu_page(\n 'acme-custom-menu',\n 'Acme Menu',\n 'Acme Menu',\n 'Acme Menu',\n 'acme-custom-menu',\n array($this, 'display')\n );\n}\n<\/code><\/pre>\n<?php\n\npublic function display()\n{\n include_once $this->pluginPath. 'views\/acme-settings.php';\n}\n<\/code><\/pre>\nEn mall och en del<\/h3>\n
En mall<\/h4>\n
\n
<?php\n\/**\n * Renders the settings page for the plugin.\n *\/\n?>\n<div class=\"wrap\">\n <h1 class=\"wp-heading-inline\"><?php echo get_admin_page_title(); ?><\/h1>\n <?php if ($this->showSuccessMessage()) { ?>\n <?php include_once 'partials\/settings-saved.php'; ?>\n ?>\n <div id=\"acme-settings-schedule\">\n <form id=\"acme-form\" method=\"post\" action=\"<?php echo esc_html(admin_url('admin-post.php')); ?>\"\">\n <!-- This is where your settings go. -->\n <p>\n <?php\n submit_button(\n 'Save',\n 'primary',\n 'acme-save-settings',\n false\n );\n wp_nonce_field(\n 'acme-save',\n 'acme-save-nonce'\n );\n ?>\n <\/p>\n <\/form>\n <\/div>\n<\/div>\n<\/code><\/pre>\nPartiell<\/h4>\n
<?php\n\npublic function showSuccessMessage()\n{\n return (false !== get_option('acme_custom_setting'));\n}\n<\/code><\/pre>\n