I den första delen i den här bloggserien i tre delar om att göra ett eget wordpressplugin gick vi igenom grunderna och fick vårt plugin att utföra något. I den här delen skall vi gå vidare och skapa en sida med kontrollpanel i wordpress admin där vi kan styra vårt plugin!

Innan vi sätter igång med detta kan det vara bra att skriva ner vad vi exakt vill att kontrollpanelen skall utföra. I förra delen gjorde vi ett plugin som lade till kod eller text i slutet på varje enskilt inlägg. För att modifiera detta är vi tvungna att grotta lite i koden och det vill man kanske i längden slippa. Så tanken här är att bygga en kontrollpanel med ett textfält där vi kan klistra in den kod som vi vill använda oss av istället för att behöva gå in i koden varje gång. Det blir ju så mycket mer användarvänligt då.

Det kommer även bli väldigt mycket kod i det här inlägget. Så om du vill ladda ner allt så hittar du en nedladdningslänk längst ner i inlägget!

De steg vi kommer att gå igenom är följande:

1. Så skapar du en kontrollpanel inne i wordpress adminavdelning
2. Skapa ett formulär på admin sidan
3. Styra funktioner i pluginet med hjälp av adminsidan – Spara information i databasen.

Skapa en kontrollpanel för vårt WordPress Plugin

För att lyckas skapa vårt plugins kontrollpanel behöver vi göra tre saker:

• Skapa en funktion mitt_lilla_plugin_menu_items() som säger till wordpress att inkludera en en ny sida i admindelen.
• Skapa en funktion som genererar innehållet på vår sida.
• Lägg till en action hook som aktiverar våra funktioner.

Koden som vi använder för detta är följande med tillhörande förklarande kommentarer.

/*
Funktion som säger till wordpress att lägga till en ny options sida. Denna sida kommer att hamna under
inställningar i sidopanelen i wordpress. add_options_page funktionen tar emot värden enligt:
add_options_page('My Plugin Options', 'My Plugin', 'manage_options', 'my-unique-identifier', 'my_plugin_options');
*/
function mitt_lilla_plugin_menu_items(){
	add_options_page('Mitt Lilla Plugin','Mitt Lilla Plugin',8,basename(__FILE__),'mitt_lilla_plugin_page');
	//OBS! Det sista värdet som anropas dvs 'mitt_lilla_plugin_page' är den funktion som genererar innehållet på sidan.
} 

//I den här funktionen skriver vi ut innehållet till vår adminsida
function mitt_lilla_plugin_page () {
	if (!current_user_can('manage_options'))  { //Om man inte är admin skall vi inte visa något för säkerhets skull
		wp_die( __('You do not have sufficient permissions to access this page.') );
	}
	echo '<h2>Mitt Lilla Plugin och dess Kontrollpanel</h2>';
	echo 'Här skall vi lägg in ett textformulär <br />';
	echo 'Här lägger vi en "Spara Knapp"';
}

//Lägger till en action Hook som aktiverar våra två funktioner.
add_action('admin_menu', 'mitt_lilla_plugin_menu_items');

?>

Det kan vara på sin plats att förklara vissa delar i den här koden för att tydliggöra vad som egentligen händer. Notera också att det INTE bara går att klistra in koden i ditt php dokument utan du behöver fylla ut koden som förklarades i del1 i den guiden. Följande kan i alla fall vara viktigt att känna till:

• I funktionen mitt_lilla_plugin_menu_items() la vi till en sida som genereras av funktionen mitt_lilla_plugin_page(). Då kommer du få en till valmöjlighet i sidopanelen under ”inställningar”. Du kan också, om du vill, lägga till ditt plugin in under ”utseende” eller ”verktyg” eller göra en helt egen avdelning för ditt plugin. Rekommenderat är dock inte att göra det om ditt plugin inte är väldigt stort och har mängder av valmöjligheter för användaren.
• Det är viktigt att försöka göra pluginet så säkert som möjligt. I det här fallet använder vi if (!current_user_can(’manage_options’)) för att se till att inga otillåtna användare tar sig in på pluginsidan och på det sättet utsätter din webbplats för hackingmöjligheter.
• Jag har kommenterat koden för att försöka förklara så många delar som möjligt, har du ännu mer frågor om detta så använd gärna kommentarerna.

Skapa ett Textformulär på Pluginsidan

När vi nu har vår sida så kan vi börja fylla den med innehåll för att på så vis kunna använda oss av den. Eftersom målet är att kunna lägga till en kodsnutt efter varje inlägg behöver vi ett textfält att klistra in denna kod och en knapp för att spara vad vi klistrat in. Sedan behöver vi också använda oss av wordpress databas för att spara det hela men det tar vi i nästa steg. Vi jobbar nu först i funktionen mitt_lilla_plugin_page() och skriver där följande:

function mitt_lilla_plugin_page () {
    if (!current_user_can('manage_options'))  { //Om man inte är admin skall vi inte visa något för säkerhets skull
        wp_die( __('You do not have sufficient permissions to access this page.') );
    }
    echo '<h2>Mitt Lilla Plugin och dess Kontrollpanel</h2>';
    echo '

        <form method="post" action="' . get_bloginfo('wpurl') . '/wp-admin/index.php">
            Klistra in din kod och tryck på Save!<br />    
            <textarea name="min_lilla_kod" style="width:500px; height:150px;background:#f1f1f1;"></textarea><br />

            <p>
                <input type="submit" value="Save" />
                <input type="hidden" name="mitt_lilla_hidden" />
            </p>

        </form>

    ';
}

Här har vi alltså ett vanligt formulär där vi placerar en textarea och en submit knapp. Vi lägger även till ett gömt fält (hidden) som vi använder för att se om något skall uppdateras. Här kan det vara värt att notera att i vårt action värde skickas till adminsidans index. Detta kan vara lite lurigt att förstå men anledningen till att göra detta är för att vi inte skall få meddelandet i webbläsaren om att skicka om vårt formulär om vi trycker på F5 (uppdatera webbläsaren). När vi väl uppdaterar formuläret skickar vi istället oss tillbaka till pluginsidan för att på så vis hamna på rätt ställe!

För att även enkelt kunna lägga till vår information senare i vår databas (kommer snart…) gör vi ännu en funktion och en hook. Vi kallar den för function mitt_lilla_plugin_requests() och i denna lägger vi alla händelser som kopplas ihop med databasen. Det är också här vi omdirigerar webbläsaren tillbaka till vår pluginsida och visar att vi har uppdaterat pluginet. För att aktivera vår requestfunktion använder vi actionhooken add_action_init. Koden ser då ut enligt följande:

//Här sparar vi information i databasen
function mitt_lilla_plugin_requests(){
    //Om det gömda fältet är satt skall vi göra något!
    if (isset($_POST['mitt_lilla_hidden'])) {

        //Omdirigerar webbläsaren tillbaka till vårt plugin och visar att det är uppdaterat
        header('Location: ' . get_bloginfo('wpurl') . '/wp-admin/options-general.php?page=mitt_lilla_plugin.php&updated=true');
        exit;
    }
}
//Kör vår requestfunktion i början av varje laddning
add_action('init', 'mitt_lilla_plugin_requests', 9999);

Här kan ett gäng saker vara viktigt att poängtera:

• Återigen är det viktigt att första själva idén med att köra en header(’location’). Vi vill alltså skicka webbläsaren mot en annan sida i vårt formulär men när vi gör detta aktiveras alltså vår init hook för att på så vis köra vår requestfunktion. I denna funktion skickar vi alltså tillbaka oss till pluginet för att där visa att det är uppdaterat! På detta vis kommer vi att få meddelanden om att vi vill återsända formuläret om vi skulle trycka på F5 (uppdatera webbläsaren).
• Just nu gör heller inte vår requestfunktion något utan det tar vi i nästa steg.

Spara Information i databasen i vårt wordpressplugin

Den här artikeln är lång 😉 men nu börjar vi närma oss det sista steget – att spara information (i vårt fall koden) i databasen! Det finns två olika sätt att använda wordpress databas för att spara information. Det ena sättet är att skapa nya tabeller när pluginet aktiveras och det andra sätt är att använda oss av en redan existerande tabell, nämligen wp_options. I vårt fall passar det bäst att använda wp_options då det är så väldigt lite som vi skall spara. Det är nämligen helt onödigt att skapa en helt ny tabell för så lite information. Dessutom finns det färdiga funktioner för att komma åt och spara vår information i just wp_options!

Så det vi kommer att göra nu för att få detta att fungera är att först lägga till en installationsfunktion som aktiveras när pluginet aktiveras. I denna använder vi funktionen add_option( ’mitt_lilla_plugin_code’, ’Put your Code here’ ); som lägger till en rad i wp_options med namnet mitt_lilla_plugin_code och defaultvärdet Put your Code here. Sedan skall vi modifiera två av våra funktioner nämligen mitt_lilla_plugin_requests() där vi nu skall uppdatera detta fält och mitt_lilla_plugin_page () där vi skall skriva ut vår kod i textfältet så att användaren ser vad som finns där. Slutligen lägger vi hämtar vi och lägger till

Vår nya installationsfunktion ser ut enligt följande:

//Installationsfunktionen som lägger till ett option där vi kan spara vår kod
function mitt_lilla_plugin_install() {
    add_option( 'mitt_lilla_plugin_code', 'Put your Code here' );
}

//aktivera mitt_lilla_plugin_install() när pluginet installeras
register_activation_hook(__FILE__,'mitt_lilla_plugin_install');

Nu modifierar vi funktionen mitt_lilla_plugin_page () också för att skriva ut det som finns i databasen i vår kontrollpanel. Det som modifieras är endast texfältet som ser ut enligt följande:

<textarea name="min_lilla_kod" style="width:500px; height:150px;background:#f1f1f1;">';
   $code = get_option('mitt_lilla_plugin_code');
   echo stripslashes($code);
echo '</textarea>

Vi använder php funktionen stripslashes för att skriva ut vår kod utan att tecknen ser helt röriga ut och vi hämtar informationen från databasen med hjälp av get_options.

Nu uppdaterar vi vår requestfunktion så att if satsen i denna uppdaterar informationen i databasen:

    if (isset($_POST['mitt_lilla_hidden'])) {

        //Uppdatera vårt optionsfält
        $code = $_POST['min_lilla_kod'];
        update_option( 'mitt_lilla_plugin_code', $code );

        //Omdirigerar webbläsaren tillbaka till vårt plugin och visar att det är uppdaterat
        header('Location: ' . get_bloginfo('wpurl') . '/wp-admin/options-general.php?page=mitt_lilla_plugin.php&updated=true');
        exit;
    }

Så! Nu kan vi spara och skriva ut koden i vår kontrollpanel. Det sista steget är nu att lägga till den i slutet av våra inlägg. Eftersom vi i det förra inlägget skapade just en sådan funktion så modifierar vi helt enkelt denna för att göra detta. Så nu ser mitt_lilla_plugin_add_code funktionen ut enligt:

function mitt_lilla_plugin_add_code ( $content ) {

    // Vi vill bara lägga till koden på enskilda inlägg
    if ( is_single() ) {

        //lägger till koden i slutet av inlägget
        $code = stripslashes(get_option('mitt_lilla_plugin_code'));
        $content .= $code;

    }

    // returnera det nya innehållet
    return $content;
}

Och där är är vårt plugin helt klart!

Göra kontrollpanel till WordPresspluginet – Avslutande tankar och kod

Det här blev ett långt och väldigt faktaspäckat inlägg om att bygga plugin. Jag skulle vilja säga att det tar tid att lära sig och förstå alla delar så jag hoppas främst att detta och mina andra pluginartiklar kan utgöra en bra svensk grund för att bygga egna plugin. Och eftersom det är så mycket kod i det här inlägget så kan du ladda ner den här.

Skapa WordPress plugin

• Del 1
• Del 3

Bra resurser för utveckling av wordpress plugin

• Skapa options sidor (Codex)
• Options Referensen (Codex)