, hvordan der kan skabes en bedre wordpress muligheder panel,,,,, 27,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, at vi i dag kan gå igennem hele processen med at oprette et kontor for en wordpress muligheder panel tema, ved hjælp af den fremragende wooframework som eksempel.så vil vi gå et skridt videre, som vi gennemfører jquery for at forbedre nogle af de funktioner,.,,,,, tutor detaljer, program,: wordpress, version: 2,7, 2, 8, 2, 9 og fremefter, vanskeligheder:, mellemprodukter, forventet produktionstid: 1, 5 timer,,, wordpress er en af de mest populære content management - software (cms), der er derude.uanset om det er en klient projekt eller for at sælge temaer på themeforest, wordpress hurtigt frem som en cms valg for mange web - udviklere.det er forholdsvis let at bruge, men kan gøres endnu mere, når de omfatter en administration panel for brugerne.i stedet for at åbne op for folkesundhedsprogrammet skabelon filer og pusle med koden, brugere, direkte kan anvende de muligheder, panel til at interagere med din wordpress tema.f.eks. • hvis deres emne er røde, blå og grønne farve ordninger, og hver har en tilsvarende css - sagen, ville det være langt lettere for brugeren at vælge deres foretrukne farve fra en dropdown liste. - så i dag, lad mig føre dig gennem hele processen med at skabe og styrke et wordpress admin - panelet side inspireret ved du, trin 1, før vi begynder at skabe admin - panelet, skal vi have et tema, ikke?så downloade kilde filer med resten.jeg har ændret lidt klassisk wordpress tema.det nettuts "mappe" (jeg har opkaldt temaet "nettuts') i deres wp indhold /themes mappe.du skulle se følgende filer:,, functions.php (blanke) index.php bemærkninger. php, fod. php, header. folkesundhedsprogrammet, rtl. folkesundhedsprogrammet, kom her. php, stil. css, skærmbillede. men heller ikke dér er menneskene sikre, en mappe med to dokumenter, billeder, størstedelen af vores arbejde vil blive gjort i functions.php fil.,, et tema, kan eventuelt anvende en funktioner sagsakter, som er bosiddende i det tema, subdirectory og er opkaldt functions.php.denne fil dybest set handler som en stik af, og hvis det er til stede i tema, de anvender, er det automatisk ladt i wordpress initialization (både for administrationen sider og eksterne sider).,, foreslåede anvendelser af sagen:,, definere funktioner, som anvendes i flere forskellige skabelon filer af temaet, etablere en administration skærm, giver brugerne mulighed for farver, styles, og andre aspekter af deres tema, (fra wp codex), trin 2, nu hvor vi har vores wordpress tema, der blev oprettet. gå til udseende > emner og aktivere nettuts tema.,, aktiveret?ok, godt.nu er vi nødt til at tænke på en skitse for vores administration panel side.her er den struktur, har jeg besluttet, < div klasse = "pakke rm_wrap" > < div klasse = "rm_opts" > < form metode = "post" > < div klasse = "rm_section" > < div klasse = "rm_title > < h3 > afsnit < /h3 > < forelægger knap > < /div > < div klasse =" rm_input rm_ < udvælge /textarea /tekst osv. > "> og lt; input område > < beskrivelse > < /div > < /div > /* gentage input til så mange valgmuligheder som påkrævet.* /* brug < div klasse = "rm_section" > for hvert nyt afsnit af råmaterialer, f.eks. general, hjemme side osv. * /< /form > < /div > < /div >, lad mig forklare det hele til dig.de muligheder, der er pakket ind i en virksomhed i forbindelse med fast ejendom, der hedder "rm_wrap" og "rm_opts" til muligheder.så starter vi en form, med alle de råmaterialer, inden for det.hvert afsnit af valgmuligheder (generelle indstillinger, hjemmeside indstillinger, blog indstillinger o.s.v.) har en særskilt div med en klasse "rm_section".det er et afsnit (div til navn) samt flere input divs inden for det.ved hjælp af klasser som < div klasse = "rm_input rm_select" > kan vi stil dropdowns, tekst - input, og textareas anderledes.det vigtigste er, at den kodning af dette skulle ikke ske manuelt - bør vi bruge folkesundhedsprogrammet er fleksibilitet, så meget som muligt.det betyder effektivitet: ikke - kode manuelt, når du har loops til dig!, trin 3, starte med at åbne functions.php i din favorit kode redaktør i brug blok + +).anføre følgende kode:, <?php $themename = "nettuts". $shortname = "s"; de to php variabler har navnet på deres område (nettuts i vores tilfælde), og en shortname, som du har defineret (nt i vores tilfælde).den shortname anvendes til præfiks alle vores tema muligheder navne, og normalt er enestående for et bestemt tema.nu skriver vi en kode, der automatisk genereres en liste over wordpress kategorier, i stedet for at brugerne type i id - numre.indtast koden under den allerede skrevet koden: $kategorier = get_categories ('hide_empty = 0 & orderby = navn. $wp_cats = array(); for hvert ($kategorier som $category_list) ($wp_cats [$category_list - > cat_id] = $category_list - > cat_name;} array_unshift ($wp_cats "vælg en kategori"); denne snippet anvendelser wordpress "indbyggede get_categories funktion for at hente alle kategorier, og så bruger en hver sløjfe opbevarer dem i variabel $wp_cats.de muligheder, "vælg en kategori", tilsættes derefter til toppen af den vifte, trin 4, nu starter vi på en liste over muligheder for tema.See below, and paste it into your functions.php file:, $options = array ( array( "name" => $themename." Options", \t"type" => "title"), array( "name" => "General", \t"type" => "section"), array( "type" => "open"), array( "name" => "Colour Scheme", \t"desc" => "Select the colour scheme for the theme", \t"id" => $shortname."_color_scheme", \t"type" => "select", \t"options" => array("blue", "red", "green"), \t"std" => "blue"), \t array( "name" => "Logo URL", \t"desc" => "Enter the link to your logo image", \t"id" => $shortname."_logo", \t"type" => "text", \t"std" => ""), \t \t array( "name" => "Custom CSS", \t"desc" => "Want to add any custom CSS code? kom her, og resten er ordnet.dette tilsidesætter alle andre stylesheets.eg: a.button{color:green}", \t"id" => $shortname."_custom_css", \t"type" => "textarea", \t"std" => ""),\t\t \t array( "type" => "close"), array( "name" => "Homepage", \t"type" => "section"), array( "type" => "open"), array( "name" => "Homepage header image", \t"desc" => "Enter the link to an image used for the homepage header.", \t"id" => $shortname."_header_img", \t"type" => "text", \t"std" => ""), \t array( "name" => "Homepage featured category", \t"desc" => "Choose a category from which featured posts are drawn", \t"id" => $shortname."_feat_cat", \t"type" => "select", \t"options" => $wp_cats, \t"std" => "Choose a category"), \t array( "type" => "close"), array( "name" => "lille", "type" = > "afdeling"), system ("type" = > "åbne") - system ("navn" = > "fod ophavsret tekst", "desc" = > "enter tekst, der anvendes i højre side af fod.det kan være html "," id "= > $shortname." _footer_text "," type "= >" tekst "," std "= >"), system ("navn" = > "google analyse kode", "desc" = > "du kan pasta dine google analyse eller andre sporings kode i denne rubrik.dette vil automatisk blive tilføjet til fods. "" id "= > $shortname." _ga_code "," type "= >" textarea "," std "= >"), system ("navn" = > "skik favicon", "desc" = > "en favicon er en 16x16 pixel ikon, der svarer til deres område; pasta url til. ico image, at de ønsker at benytte, som billedet", "id" = > $shortname. "_favicon", "type" = > "tekst", "std" = > get_bloginfo ('url). "favicon. ico"), system ("navn" = > "feedburner url", "desc" = > "feedburner er google tjeneste, der tager sig af deres rss foder.pasta, din feedburner url her lader læserne kan se det i jeres hjemmeside "," id "= > $shortname." _feedburner "," type "= >" tekst "," std "= > get_bloginfo ('rss2_url ')), system (" type "= >" tæt på "), som var en stor del af kodeksen, som berettiger en forklaring.så kører vi:,, på den variable $muligheder butikker hele listen over muligheder for tema. det består af en række arrays, hver med en "type" nøgle for at vise, hvordan det vil blive udstillet, og hvad det betyder. vi starter med et "type" = > "afsnit" system - det vil blive anvendt til at vise themename og et afsnit på toppen af side, skal hver afdeling (general hjemmeside og fod) har en særskilt liste over muligheder. vi starter et nyt afsnit af lukning af en foregående afsnit, erklære, at et nyt afsnit af system ("navn" = > "lille", "type" = > "afdeling"), og om en ny sektion. hver mulighed kan have de muligheder, som angivet nedenfor:, navn: navnet på input område.,, desc: en kort beskrivelse at forklare, hvad det er for brugeren., id:, -af banen, indledt af den shortname.det vil blive brugt til at lagre samt adgang til de muligheder,.,, type:, input - - vælge, tekst eller textarea,, optioner,: anvendes til at erklære en vifte af muligheder for en særlig type input.,, std:, standard input - værdi, som anvendes, hvis ingen andre input er givet.,, løntrin 5, prøv at sejle til wordpress.du vil se, at der er ingen steder at faktisk mulighed, mener, at administrationen panel side, hvordan kan vi så på det?der tilføjes følgende stykker af kode til functions.php fil:, funktion mytheme_add_admin() (global $themename, $shortname $muligheder; hvis ($_get ['page ". = = basename (__file__)) (hvis (" redde "= = $_request [»tiltaget«]) (for hvert ($muligheder som $værdi) (update_option ($værdi ['id" $_request [$værdi ['id ']]);} for hvert ($muligheder som $værdi) (hvis (isset ($_request [$værdi ['id']])) (update_option ($værdi ['id "$_request [$værdi ['id ']]);} andre (delete_option ($værdi ['id']);}} header (" beliggenhed: admin.php?s = funktioner. php & reddede = sand "); dø.} andre, hvis (" nulstilling "= = $_request [»tiltaget«]) (for hvert ($muligheder som $værdi) (delete_option ($værdi ['id ']);} header (" beliggenhed: admin.php?s = funktioner. php & - = sand "); dø.}} add_menu_page ($themename, $themename" administrator ", basename (__file__), mytheme_admin)} funktion mytheme_add_init() {}, denne funktion er beregnet til ajourføring af muligheder, samt at tilføje en menu side.hvis muligheder bliver reddet (angivet ved et skjulte variable redde), så alle muligheder er ajourført med nye værdier.hvis muligheder bliver nulstille (angivet ved en anden skjult variabel med en værdi nulstille), så alle de valgmuligheder, udgår.den sidste linje er en menu, s - parametre er henholdsvis navn og titel, brugerens tilladelse, der kræves på den side, redde side, og den funktion, der anvendes til display /opsparing (kaldet mytheme_admin i vores tilfælde).se mytheme_add_init, en blanbk funktion?lad det være, kommer vi til senere. trin 6, stadig ingen tema muligheder side, ikke?kan du huske, mytheme_admim, funktion, vi havde talt om et par linjer siden?vi har ikke skrevet, at fungere.så brug koden fra skridt 6,7 og 8 til at skrive denne funktion.starter:, funktion mytheme_admin() (global $themename, $shortname $muligheder; $jeg = 0, hvis ($_request ['saved ']) echo' < div id = "budskab" klasse = "ajourført falme" > < p > < stærk > ". $themename. indstillinger reddet. < /stærk > < /p > < /div > '; hvis ($_request ['reset']) echo '< div id =" budskab "klasse =" ajourført falme "> < p > < stærk >. $themename. indstillinger nulstillet. < /stærk > < /p > < /div > «.> < div klasse = "pakke rm_wrap" > < h2 > <?php echo $themename;?> (< /h2 > < div klasse = "rm_opts" > < form metode = "post" > meget simpelt, ikke?hvis muligheder er blevet reddet, skrive en besked om det.på samme måde som for nulstilles.ser du, en klasse = "ajourført falme" - wordpress automatisk vil forsvinde ud i nogle dele.flot, ikke?videre, så begynder vi at "rm_wrap"., trin 7, som fra oven, pasta i følgende kode:, <?folkesundhedsprogrammet for hvert ($muligheder som $værdi) (skift ($værdi ['type ']) ("åbne"?> <?php bryde; sag "tæt på"?> < /div > < /div > < br /> <?php pause. "":?> < p > for lettere at anvende <?php echo $themename;?> tema, du kan bruge kortet nedenfor. < /p > <?php bryde; sag 'tekst:?> < div klasse = "rm_input rm_text" > < etiket til = "<?php echo $værdi ['id ']?> "> <?php echo $værdi ['name ']?> < /etiketten > < input navn = "<?php echo $værdi ['id ']?> "id =" <?php echo $værdi ['id ']?> "type =" <?php echo $værdi ['type ']?> "værdi =" <?folkesundhedsprogrammet (get_settings ($værdi ['id ']).= ") (echo stripslashes (get_settings ($værdi ['id '])} andre (echo $værdi ['std']}?> "/> < små > <?php echo $værdi ['desc ']?> < /små > < div klasse = "clearfix" > < /div > < /div > <?php bryde; sag textarea:?> < div klasse = "rm_input rm_textarea" > < etiket til = "<?php echo $værdi ['id ']?> "> <?php echo $værdi ['name ']?> < /etiketten > < textarea navn = "<?php echo $værdi ['id ']?> "type =" <?php echo $værdi ['type ']?> "koller =" rækker = "> <?folkesundhedsprogrammet (get_settings ($værdi ['id ']).= ") (echo stripslashes (get_settings ($værdi ['id '])} andre (echo $værdi ['std']}?> < /textarea > < små > <?php echo $værdi ['desc ']?> < /små > < div klasse = "clearfix" > < /div > < /div > <?php bryde; sag "vælg":?> < div klasse = "rm_input rm_select" > < etiket til = "<?php echo $værdi ['id ']?> "> <?php echo $værdi ['name ']?> < /etiketten > < udvælge navn = "<?php echo $værdi ['id ']?> "id =" <?php echo $værdi ['id ']?> "> <?folkesundhedsprogrammet for hvert ($værdi ['options'] som $option) {?> < alternativ <?folkesundhedsprogrammet (get_settings ($værdi ['id ']) = = $mulighed) (echo udvalgte = "udvalgt" «)?> > <?php echo $mulighed?> < /mulighed > <?folkesundhedsprogrammet)?> < /udvælge > < små > <?php echo $værdi ['desc ']?> < /små > < div klasse = "clearfix" > < /div > < /div > <?php bryde; sag "afkrydsningsfelt"?> < div klasse = "rm_input rm_checkbox" > < etiket til = "<?php echo $værdi ['id ']?> "> <?php echo $værdi ['name ']?> < /etiketten > <?folkesundhedsprogrammet (get_option ($værdi ['id '])) ($kontrolleret = "kontrolleret =)" kontrolleret. ""} andre {$kontrolleret = "")?> < input type = "= afkrydsningsfelt" navn "<?php echo $værdi ['id ']?> "id =" <?php echo $værdi ['id ']?> "værdi =" ægte "<?php echo $kontrolleres?> /> < små > <?php echo $værdi ['desc ']?> < /små > < div klasse = "clearfix" > < /div > < /div > <?php pause. det er et stort stykke kode!forklaring - ved hjælp af en php hver sløjfe, hver valgmulighed type vurderes fra sag til sag.vi bruger en kontakt, sag teknik til dette.det variable er mulighederne - tilfælde følges op og evalueret.meddelelse "pause" erklæring efter hvert enkelt tilfælde?det er for at undgå det, der kaldes "falder gennem deres ejendom.når en sag er parret, alle de sager er også blevet henrettet.det betyder, at hvis vi matche sag 3 tilfælde 4,5 osv. også henrettet.vi vil ikke have det, ikke?så brug en chance for at stoppe det. hvis der er en "åben" type mulighed - ikke er gjort.hvis der er "tæt" type muligheder, to divs er lukket."afsnit" mulighed anvendes kun, når det er en introduktion til emnet muligheder.for hver af de typer "tekst" (input type = "tekst"), "vælg" (dropdowns), "afkrydsningsfelt" og "textarea" (det klart, hvad de mener, de tilsvarende bidrag er udstillet.bemærk < div klasse = "clearfix" > - det er anvendt til clearing, flåd, som vi vil gøre senere, trin 8, vi kommer til slutningen af den massive funktion.pasta i kodeksen under:, "afdeling": $i + +?> < div klasse = "rm_section" > < div klasse = "rm_title" > < h3 > < img src = "<?folkesundhedsprogrammet aspektet bloginfo ('template_directory)?> /funktioner /images /trans. gif "klasse =" inaktive "alat =" "" > <?php echo $værdi ['name ']?> < /h3 > < over klasse = "stille" > < input navn = "gem <?php echo $i?> "type =" stille "værdi =" red ændringer "/> < /span > < div klasse =" clearfix "> < /div > < /div > < div klasse =" rm_options "> <?php pause.}}?> < input type = "skjulte" navn = "aktion" værdi = "redde" /> < /form > < form metode = "post" > < p - klassen = "stille" > < input navn = "nulstilling" type = "stille" værdi = "nulstilling" /> < input type = "skjulte" navn = "aktion" værdi = "nulstilling" /> < /p > < /form > < div stil = font størrelse: 9px; margen nederst: 10px; "> ikoner: < en href =" http: //////////////www.woothemes. kom /2009 /09 /woofunction /"> woofunction < /a > < /div > < /div > <?folkesundhedsprogrammet)?> for en "del" - mulighed, jeg har brugt en tæller variable $i. det holder styr på de strækninger, antal og conactenates til navnet på den stille knap, har enestående forelægge knapper.der er også en form for enden for nulstilling af alle muligheder.det billede, der anvendes, skal være et gennemsigtigt billede, der anvendes i vores jquery 's.brug det sidste stykke kode til at bringe vores funktioner i spil:, <?folkesundhedsprogrammet aspektet add_action ('admin_init "," mytheme_add_init '); add_action ('admin_menu "," mytheme_add_admin)?> det siger wordpress at tilføje admin menu. trin 9, og voila!vi har vores eget fedt admin - panelet side med en separat menu holdning til sig selv.så lad os undersøge det - klik på linket.og ulækkert.- det må være den mest barske admin - panelet side nogensinde.så lad os opfordre vores gode ven, css!skabe en ny mappe i nettuts /fortegnelse navn "opgaver".skabe en ny css fil, der - functions.css.pasta i følgende kode:,. rm_wrap (bredde: 740px.}. rm_section {grænse: 1px fast&#ddd; grænseoverskridende nederst: 0; baggrund:&#f9f9f9.}. rm_opts etiket skriftstørrelse: 12px; skrifttype vægt: 700; bredde: 200px; display: blok; flyde: venstre}. rm_input (polstring: 30px 10px; grænseoverskridende nederst: 1px fast&#ddd; grænseoverskridende top: 1px fast&#fff.}. rm_opts små (display: blok; flyde: ret; bredde: 200px; farve:ϧ.}. rm_opts bidrag [type = "tekst"]. rm_opts udvælge (bredde: 280px; skriftstørrelsen: 12px; polstring: 4px; farve:ō og linje, højde: 1em; baggrund:&#f3f3f3.}. rm_input input: fokus. rm_input textarea: vægt {baggrund:&#fff.}. rm_input textarea (bredde: 280px. højde: 175px; skriftstørrelsen: 12px; polstring: 4px; farve:ō. \tline-height:1.5em; \tbackground:#f3f3f3; } .rm_title h3 { \tcursor:pointer; \tfont-size:1em; \ttext-transform: uppercase; \tmargin:0; \tfont-weight:bold; \tcolor:#232323; \tfloat:left; \twidth:80%; \tpadding:14px 4px; } .rm_title{ \tcursor:pointer; \tborder-bottom:1px solid #ddd; \tbackground:#eee; \tpadding:0; } .rm_title h3 img.inactive{ \tmargin:-8px 10px 0 2px; \twidth:32px; \theight:32px;\t \tbackground:url('images/pointer.png') no-repeat 0 0; \tfloat:left; \t-moz-border-radius:6px; \tborder:1px solid #ccc; } .rm_title h3 img.active{ \tmargin:-8px 10px 0 2px; \twidth:32px; \theight:32px;\t \tbackground:url('images/pointer.png') no-repeat 0 -32px; \tfloat:left; \t-moz-border-radius:6px; \t-webkit-border-radius:6px; \tborder:1px fast&#ccc.}. rm_title h3: svæv img {grænse: 1px fastϧ.}. rm_title span. forelægge (display: blok; flyde: ret; margen: 0; polstring: 0; bredde: 15%; polstring: 14px 0}. clearfix {klart: begge; rm_table). 1. rm_table td {grænse: 1px fast&#bbb; polstring: 10px; tekst tilpasse: center;}. rm_table.. rm_table td. træk (grænse farve:͸.}, vil jeg ikke forklare noget her. det er klart, hvad hver css - erklæringen er, og du er fri til at vælge opstilling til dit eget tema. gå 10, så nu har vi en god css fil.men hvordan kan vi føje den til side?efter alt det, vi ikke har direkte adgang til < head > af dokumentet.kan du huske det tomme mytheme_add_init() funktion, vi skrev i trin 4?det vil komme i handy.ændre det her:, funktion mytheme_add_init() ($file_dir = get_bloginfo ('template_directory '); wp_enqueue_style ("opgaver" $file_dir. "/funktioner /funktioner. css" falske "1", "alle");}, det tilføjer functions.css fil til hovedet.placeringen af den fil, bestemmes af den skabelon, fortegnelse.,, trin 11, se side nu.ret flot, ikke?men så, spørger du, hvad "+" ikon?ja, det er hvor jquery kommer!. skabe en ny fil rm_script.js i nettuts /funktioner /mappe.pasta i følgende kode:, jquery (dokument). klar (function() {jquery (". rm_options'). slideup(); jquery (". rm_section h3). klik (function() (hvis (jquery (dette). parent(). næste (". rm_options). css ('display) = = ='none") (jquery (dette). removeclass ('inactive '). addclass ('active). børn ('img'). removeclass ('inactive '). addclass ('active)} andre (jquery (dette). removeclass ('active'). addclass ('inactive). børn ('img '). removeclass ('active'). addclass ('inactive)} jquery (dette). parent(). næste (". rm_options'). slidetoggle ('slow)})}), hvad det er - når dom belastninger, alle rm_options glide op.når "+" ikon er trykket, inaktive klasse er fjernet fra det image og den aktive klasse ekstra - gøre det "-" ikon.det omvendte er færdig, når "-" ikon er faldet.den rm_options er så gled op eller ned (bestemt ved den nuværende css stat) ved hjælp af slidetoggle funktion - ret simpelt.at tilføje det manuskript, den samme mytheme_add_init() funktion er anvendt.ændre det til:, funktion mytheme_add_init() ($file_dir = get_bloginfo ('template_directory '); wp_enqueue_style ("opgaver" $file_dir. "/funktioner /funktioner. css" falske "1", "alle"); wp_enqueue_script ("rm_script" $file_dir. "/funktioner /rm_script. j' er", falske "0");}, jquery manuskript nu vil være aktiv.gp - tjek det ud.jeg tror, den er smuk!,, trin 12, nu hvor vi har vores tema muligheder side klar, jeg løber bare du ved hjælp af muligheder.koden til at anvende de muligheder, er som følger: $var = get_option ('nt_colur_scheme '); det vil hente nt_color_scheme muligheder.se nedenstående eksempler: /* ændring css stylesheet afhængigt af de valgte farve * /< forbindelse rel = "stylesheet" type = "tekst /css" href = "<?folkesundhedsprogrammet aspektet bloginfo ('template_directory)?> /<?php echo get_option ('nt_color_scheme)?>. css "/> /* at gentage nogle meter ophavsret tekst med html * /< p > <?php echo stripslashes (get_option ('bl_footer_text ')?> < /p > de forskellige anvendelser begrænses kun af fantasien. konklusion, jeg håber, du har lært noget i denne forelæsning.det er ikke din standard muligheder panel.denne bruger ikke tabeller, er det jquery forstærket, bruger fantastisk css og er meget nemt at bruge.formålet med denne lektion er at lære - - kan du altid erstatte sammenfoldelig paneler med tab, for eksempel, eller endog noget mere avanceret.brug din kreativitet.føl dig fri til at drøfte eller stille spørgsmål i bemærkningerne.siden da har frigivet, woothemes version to af deres rammer.kan du gennemgå detaljerne her.,, følger os på twitter, eller abonnere på nettuts + rss foder til den bedste web udvikling tutorials på nettet.,