WordPress kortkode. Hvordan lage kortkoder for WordPress

Legger til en ny kortkode og en krok for den.

Bare én behandlerfunksjon kan opprettes for hver kortkode. Dette betyr at hvis en annen plugin bruker samme kortkode, vil funksjonen din erstattes av en annen eller omvendt (avhengig av rekkefølgen funksjonene er koblet til).

Hvis kortkoden har attributter, konverteres de til små bokstaver før de sendes til funksjonen. Verdier påvirkes ikke.

Resultatet som funksjonen returnerer (shortkodebehandleren) skal alltid returneres, ikke vises.

Kortkoder er en konstruksjon av formen: eller eller tekst i teksten, som vil bli erstattet av annen tekst opprettet av krokfunksjonen som er ansvarlig for kortkoden.

Video om kortkoder i WordPress:

Det er ingen kroker.

returnerer

Returnerer ingenting.

Bruk

add_shortcode($tag , $func); $tag (streng) (påkrevd)

Navnet på kortkoden som skal brukes i teksten. For eksempel: "galleri".

Navnet kan ikke inneholde mellomrom og ikke-standardtegn som: & /< > = .
Standard: nei

$func (streng) (påkrevd)

Navnet på funksjonen som skal fungere hvis kortkoden blir funnet.

Funksjonen mottar 3 parametere, hver av dem kan eller ikke kan sendes:

    $atts (array)
    Et assosiativt utvalg av attributter spesifisert i kortkoden.
    Standard: "" (tom streng - ingen attributter)

    $innhold (linje)
    Kortkodetekst når kortkodeavslutningskonstruksjon brukes: kortkodetekst
    Standard: ""

  • $tag (linje)
    Kortkode-tag. Det kan være nyttig for overføring til tillegg. funksjoner. Eks: hvis kortkoden er - , vil taggen være - foo .
    Standard: gjeldende tag

Standard: nei

Eksempler

#en. Kortkoderegistreringseksempel:

function footag_func($atts)( return "foo = ". $atts["foo"]; ) add_shortcode("footag", "footag_func"); // resultat: // kortkoden i teksten vil bli erstattet med "foo = bar"

#1.2. Sette en hviteliste over kortkodeattributter

For at shortcode bare skal ha parameterne vi spesifiserte og for at disse parameterne skal ha standardverdier, må vi bruke shortcode_atts() funksjonen:

Add_shortcode("bartag", "bartag_func"); funksjon bartag_func($atts)( // hvitelisteparametere og standardverdier ​​$atts = shortcode_atts(array("foo" => "no foo", "baz" => "standard baz"), $atts); return " foo = ($atts["foo"])"; )

#2. Registrere en kortkode med innhold

Et eksempel på å lage en slik kortkode: her er teksten:

Add_shortcode("baztag", "baztag_func"); function baztag_func($atts, $content) ( return "content = $content"; ) // resultat: // shortcode-konstruksjonen vil bli erstattet med "content = tekst her"

#3. Registrere en kortkode for klasser

Hvis plugin-en din er skrevet med en klasse:

Add_shortcode("baztag", [ "MyPlugin", "baztag_func" ]); klasse MyPlugin ( statisk funksjon baztag_func($atts, $content) (retur "content = $content"; ) )

#4 Sett inn iframe via kortkode

Dette eksemplet viser hvordan du lager en kortkode slik at du kan sette inn en iframe gjennom den senere.

Funksjon Generate_iframe($atts) ( $atts = shortcode_atts(array("href" => "http://example.com", "height" => "550px", "width" => "600px",), $ atts); return" "; ) add_shortcode("iframe", "Generer_iframe"); // bruk:

#5 Vise et innlegg med ID via en kortkode

Få innlegget med ID ved å bruke kortkoden i temaets functions.php-fil.

Add_shortcode("uttalelser", "uttalelser_kortkode_handler"); function testimonials_shortcode_handler($atts)( global $post; $rg = (objekt) shortcode_atts([ "id" => null ], $atts); if(! $post = get_post($rg->id)) returnerer "" ; $url = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); $out = "

logo). "" alt="(!LANG:ikon" /> !}

".get_the_content() ."

forfatter_bilde) ."" alt="(!LANG:bilde"> !}

".esc_html($post->author_name) ." ".esc_html($post->author_designation) ."

"; wp_reset_postdata(); return $out; )

Notater

  • Global. Array. $shortcode_tags

Liste over endringer

Siden versjon 2.5.0 Introdusert.

Koden legg til kortkode: wp-includes/shortcodes.php WP 5.2.3

&/\[\]\x00-\x20=]@", $tag)) ( /* oversettere: 1: kortkodenavn, 2: mellomromseparert liste over reserverte tegn */ $melding = sprintf(__("Ugyldig kortkode navn: %1$s. Ikke bruk mellomrom eller reserverte tegn: %2$s"), $tag, "& /< >="); _doing_it_wrong(__FUNCTION__, $message, "4.4.0"); return; ) $shortcode_tags[ $tag ] = $callback; )

Har du noen gang ønsket å legge til noe spesielt innhold på en WordPress-side eller blogginnlegg, men var du usikker på hvordan du gjør det? Kanskje du ønsket å bygge inn en Twitter-widget eller annet innhold kalt fra et annet nettsted via et API? Vil det være mulig å legge det til siden uten problemer? Heldigvis har WordPress en funksjon som kort kode, som vil hjelpe til med å løse problemene ovenfor. Denne artikkelen vil lære deg hvordan du lager, installerer og bruker kortkoder på WordPress-bloggen din. La oss først forstå hva denne kortkoden er.

WordPress-kortkode – hvem er du?

Kort fortalt er en kortkode en spesiell tag som du setter inn i et innlegg, og denne ‘kortkoden’ erstattes med annet innhold når innlegget vises til sluttbrukeren av siden. Hvis du noen gang har lagt inn et WordPress-galleri i bloggen din, har du sett kortkoden innebygd i motoren.

Når du laster inn en side med [galleri]-kortkoden på, erstatter Worpdess [galleri] fullstendig med koden som faktisk viser bildegalleriet ditt.

Som du kan se fra eksempelet ovenfor, ligner kortkoden på en vanlig HTML-tag, men den er omsluttet av hakeparenteser i stedet. Denne koden erstattes med annen kode når den lastes av nettleseren. Og selvfølgelig lar WordPress oss lage tilpassede kortkoder for å vise hva som helst! Du kan bruke den til Youtube-videoer, vise de siste tweetene dine og tilpasse den etter eget ønske.

La oss se på et ekte eksempel. La oss si at vi ønsker å vise AdSense-annonser i innlegget mitt. For å gjøre dette kan du gå inn i tekstmodusen til WordPress visuelle editor og kopiere / lime inn AdSense-blokkkoden i den, men dette vil være kjedelig og skjemme kildekoden til innlegget. I tillegg, hvis det blir nødvendig å endre annonseenheten, må du redigere hver innlegget der vi la inn annonsen. En enkel løsning (og mer rasjonell) for å sette inn en annonseblokk hvor som helst på bloggen er å bruke adsense-kortkoden. Det kan se omtrent slik ut:

Når du ser innlegget på nettstedet ditt (ikke i administrasjonspanelet), vil kortkoden bli erstattet av en Adsense-annonseblokk. Så hvordan lager du det? Selvfølgelig må du fortelle Worpdess hva du skal erstatte og med hva.

Hvordan lage en kortkode?

Heldigvis lar WordPress deg lage kortkoder på en ganske grei måte, så la oss lage en . Det første vi trenger er å definere en funksjon som viser Adsense-annonsekoden. Vi setter inn all koden nedenfor i functions.php-filen til temaet ditt (selv om du også kan legge den i en egen plugin-fil). La oss se på selve funksjonen:

function get_adsense($atts) ( return " "; }

Denne funksjonen er ganske enkel - den returnerer bare Google Adsense-koden som en streng. Kortkoden vil bli erstattet med det funksjonen vår returnerer, dvs. i teorien kan du få html for en twitter-widget, eller en liste over blogginnlegg, eller hva som helst...

Nå har vi en funksjon som returnerer verdiene vi trenger, hvordan kan vi lage en kortkode for den? Nå kommer WordPress API inn i bildet. Igjen, la oss se hvordan dette gjøres og deretter forklare hva som skjer. Her er oppfordringen til å definere adsense-kortkoden.

Add_shortcode("adsense", "get_adsense");

Det er alt! Den første parameteren som sendes er navnet på kortkoden, i vårt tilfelle 'adsense' som forteller Worpdess å lage kortkoden . Den andre parameteren definerer funksjonen som vil bli kalt når en ny kortkode oppdages. I vårt tilfelle ber 'get_adsense' VI om å erstatte kortkoden med resultatene av get_adsense-funksjonen.

Ikke verst, ikke sant? Dette er den enkleste kortkoden, men WordPress lar deg gjøre forskjellige ting med dem (legg til parametere for å bytte Adsense-blokker, for eksempel). Hele API-en finner du på WordPress Codex.

Hvordan bruke kortkode?

Dette er den enkleste delen: bare legg til i det visuelle/tekstredigeringsverktøyet til innlegget eller siden. Alt. Du har opprettet din første kortkode.

    Hallo.

    Det var et generelt spørsmål, men kunnskapen om engelsk er ikke nok til å stille i emnestøtteforumet.

    Generelt er det en fersk versjon av WordPress og et tema med mange funksjoner, inkludert muligheten til å legge til php-kode i innhold eller lage kortkoder med kode. Så jeg fant ut at når du setter inn en enkel kode i innholdet, er det ingen problemer, mer eller mindre komplekse, det fungerer ikke, men det fungerer hvis du lager en kortkode.

    For eksempel,
    the_permalink()
    fungerer når den limes inn i innhold og når den limes inn gjennom en kortkode opprettet gjennom et tema.

    Men, for eksempel, når du bruker share42-skriptet, fungerer alt, bortsett fra php-koden (the_permalink()), etc. Du kan ikke jukse koden, jeg lærer fortsatt andre muligheter.
    Prøvde å lime inn emnet på forskjellige steder. Bare
    the_permalink()
    fungerer og


    Nei.
    Jeg fant en løsning, for å lage den enkleste plugin, der det bare er funksjoner og opprettelsen av en kortkode for denne funksjonen, uten noen andre funksjoner. Det er slik det fungerer.

    Faktisk spørsmål 1, så normalt? Vil det være noen fallgruver?
    Jeg så slike enkle plugins i WordPress-depotet.

    Og spørsmål 2, hva er den beste måten å lage en separat plugin for hver kortkode eller en plugin for alle kortkoder?

    Det kalles en syklist på krykker. Til hva? Det er et riktig alternativ - å skrive din egen kortkode. Vet ikke hvordan, eller er det vanskelig å forstå? Ansett en spesialist og la ham gjøre det rette for deg. Oppgaven din er enkel - gebyret bør ikke være stort. På samme kwork for 500 rubler vil de gjøre det for deg

    Hva vil det si å skrive sin egen kortkode?

    For eksempel,

    Funksjon my_title_shortcode($atts) ( return get_the_title(); ) add_shortcode("min_tittel", "min_tittel_kortkode");

    og bruk deretter the_title() i stedet.

    Du kan også bruke plugins for å lage kortkoder, for eksempel . Vel, som en bonus kan du legge ved for eksempel en rullegardinmeny for kortkoder ved å bruke plugin.

    P.S. Du bør ikke vise the_title() som et attributt, du risikerer å bryte oppsettet. Enten bruk esc_attr(get_the_title()) escape, eller skriv ut den escapede tittelen med en gang med_title_attribute().

    Det gir ingen mening for meg å bruke en plugin for kortkoder, selve temaet lar deg lage dem. Akkurat når du setter inn share42 ved hjelp av kortkoder eller gjennom et tema, fungerer ikke php-koden. Sannsynligvis fordi det på en eller annen måte behandles gjennom javascript share42. Faktisk, for ikke å rote med temakoden, laget jeg en enkel plugin for å lage en kortkode. Det er slik det fungerer. Jeg tror at hvis du lager et barnetema og lager en shortcode der, så fungerer det også. Spørsmålet er egentlig, hva er den beste måten å lage et barnetema eller lage en plugin på? Og hvis det er en plugin, så er det bedre å lage alle kortkoder i en plugin eller en separat plugin for hver. Under plugin har jeg oppgitt kode

"; return $SB42Str; ) add_shortcode("sb42", "InsertSB42"); ?>

Hva er den beste måten å lage et barnetema på?

når du setter inn share42

P.S. Til og med share42 har en plugin. Riktignok er den like gammel som selve share42-metoden.

Jeg klarte ikke å stille et klart spørsmål. Det er som om ingen har lest den i det hele tatt. Jeg deler spørsmålet i to. Hvem vet, vennligst hjelp.

Oppgaven er å lage en enkel kortkode uten plugin. Type

Implementering via et undertema eller via en plugin? Hvilket alternativ er bedre?

Hvis gjennom en plugin, og du trenger å lage flere kortkoder, hvilket alternativ er bedre, lage en plugin med alle kortkoder eller separate plugins for hver kortkode? Hvilket alternativ er mer produktivt og krever mindre minne.

Jeg klarte ikke å stille et klart spørsmål. ..

Fordi i hver av meldingene dine er det flere spørsmål samtidig. For eksempel:

Spørsmålet er egentlig, hva er den beste måten å lage et barnetema eller lage en plugin på? Og hvis det er en plugin, så er det bedre å lage alle kortkoder i en plugin eller en separat plugin for hver.

... Jeg deler spørsmålet i to.

Nå forstår du hva reglene på dette forumet er for?

Det er som om ingen har lest den i det hele tatt.

Akkurat den samme følelsen skapes av at man ikke leser svarene. Personlig anbefalte jeg deg det viktigste - i stedet for å finne opp hjulet med å sette inn sosiale nettverksknapper fra en nesten avdød share42, danse med en tamburin og kaste bort tiden på å lure deg selv og andre - bruk de riktige og ferdige løsningene.

Ok, helt i begynnelsen av det første innlegget skrev jeg at dette er et generelt spørsmål. Shara42 rent som et eksempel. Egentlig fikk jeg i oppgave å vise informasjon gjennom kortkoder. Slike plug-ins finnes ikke i naturen i det hele tatt, fordi infaen er hentet fra kundens selvskrevne program. PHP-kode limt inn via shortcode-pluginen fungerer ikke alltid. Hvor widgets behandles av javascript php-kode fungerer ikke. Jeg satte inn den nødvendige koden i functions.php på testsiden og alt fungerte. Men kunden forbyr å endre temafilene. Så du må bruke et barnetema. Eller ordne koden i form av en enkel plugin. Egentlig ett spørsmål. Hvis du trenger flere kortkoder, er det bedre å gjøre dem i én plugin eller med plugin per kortkode?

For et spesifikt prosjekt vil et plugin-alternativ gå (kanskje til og med en MU-plugin - slik at den ikke blir deaktivert ved et uhell). I en plugin, en samling av flere kortkoder. Når noe går galt, vil du vite at alle kortkodene dine fungerer fra én plugin.

Se 9 svar - 1 til 9 (totalt 9)

  • Emnet 'Opprette kortkoder' er stengt for nye svar.

WordPress er et kraftig publiseringssystem som er like praktisk for nybegynnere bloggere, så vel som for å lage fora, sosiale nettverk, butikker, etc.

Vanligvis velges en passende mal (mal) for hver applikasjon, men noen ganger er ikke funksjonene nok.

Det er her kortkoder kommer til unnsetning, ved hjelp av disse kan du legge til din egen "glede" til WordPress.

En kortkode er en kort kode som settes inn direkte i teksten til en side, overskrift, widget – altså i innholdet og utvider mulighetene til WordPress.

Med den kan du vakkert formatere teksten, dele den opp i kolonner, sette inn innhold, en knapp, en lydspiller, et bestillingsskjema og mange andre funksjoner som skiller WordPress fra alle andre.

Hvis det ikke er noen behandler for en spesifikk kortkode, vil kallet på siden se ut som ren tekst.

Denne artikkelen brukte med vilje navnene på ikke-eksisterende kortkoder slik at du kan se hvordan kallet til kortkoden ser ut, og ikke resultatet av arbeidet.

Kortkodetyper etter struktur

De kan være uten parametere, med parametere og med innhold.

Kortkoder uten parametere

Noen ganger er det nok å ringe en kortkode for at den skal utføre en veldefinert funksjon. Den trenger ikke sende noen parametere.

For eksempel viser denne koden en horisontal linje. Utseendet er definert i stilarket.

Denne oppfordringen skriver ut gjeldende år. Praktisk å ikke redigere tekster hvert år.

Kortkoder med parametere

Noen ganger må du sende parametere for å få forskjellige resultater.

For eksempel er det slik en vakker knapp settes inn, hvis stil skal skrives i stilarket.

Den inneholder to parametere: tittel- dette er inskripsjonen på knappen, for eksempel Bestill, Abonner, etc.

url er klikkadressen.

Slik kan du sette inn prisen i rubler, som automatisk konverteres fra prisen i dollar med gjeldende valutakurs til sentralbanken.

Her er parameteren s er prisen i dollar.

Innholdskortkoder

De består av to deler, mellom hvilke det kan være hvilket som helst innleggsinnhold, widget osv.

Slik kan du fremheve et stykke tekst eller en del av et innlegg ved å "plassere" en farget bakgrunn under det:

Her er litt tekst som vil vises på en farget bakgrunn.

Parameter farge setter bakgrunnsfargen i den vanlige heksadesimale koden.

Og her er hvordan du kan vise tekst i to kolonner med samme bredde:

En shortcode i php-kode består av en funksjon som behandler den og en kommando som tildeler den tilsvarende funksjonen til koden.

Her er en typisk kortkode for en knapp:

funksjon ha_men($atts,$content=NULL) (
extract(shortcode_atts(array(
‘tittel’ => ‘Gå’,
'url' => usann
), $atts));

$output=" '.$tittel."’;

returnere $output;
}
add_shortcode('men','ha_men');

I dette eksemplet er funksjonen navngitt ha_men. Det er bestått to parametere - tittel Og url. Og for tittel standardverdi tildelt . Hvis, når du kaller koden, parameteren tittel hoppe over, vil standardknappen bli merket Gå.

Inne i funksjonen kan andre funksjoner kalles, filer kan kobles til osv. Shortcode-funksjonalitet er bare begrenset av fantasien og programmeringsferdighetene dine.

Funksjonen returnerer deretter resultatet med komme tilbake.

Funksjon add_shortcode tilordner kortkode etter navn men handlerfunksjon etter navn ha_men.

Og her er stilene for den gule knappen i full bredde:

Btn(
display: inline-blokk
farge: #000000;
font: 300 16px "Roboto", sans-serif;
tekst-transform: store bokstaver;
bakgrunn: #fde42b;
bakgrunn: -webkit-gradient(lineær, venstre topp, venstre bunn, fra(#fcea38), til(#ffcf00));
bakgrunn: -webkit-linear-gradient(top, #fcea38 0%, #ffcf00 100%);
bakgrunn: lineær gradient(til bunn, #fcea38 0%, #ffcf00 100%);
border-bottom: 3px solid #b27d00;
polstring: 14px 15px 11px;
bredde: 90 %
kantradius: 2px
tekst-align: center;
tekst-dekorasjon: ingen;
tekst-skygge: 1px 1px 0 #ffec89;

}
.btn:hover (
opasitet: 1
bakgrunn: -webkit-gradient(lineær, venstre bunn, venstre topp, fra(#ffdd02), til(#fffe6d));
bakgrunn: -webkit-lineær-gradient(bunn, #ffdd02 0%, #fffe6d 100%);
bakgrunn: lineær gradient(to top, #ffdd02 0%, #fffe6d 100%);
kantfarge: #bd8500;

Slik setter du inn en kortkode i en WordPress-mal

Sett inn en funksjon - kortkodebehandleren kan være direkte i filen som er ansvarlig for utdata av enkeltinnlegg - vanligvis er dette singel.php. Da vil denne kortkoden kun fungere i innlegg.

Bedre å legge det i en fil funksjoner.php finnes i et hvilket som helst WordPress-tema. Da vil kortkoden fungere på alle sider, widgets osv.

Men hvis du oppdaterer eller endrer malen, vil ikke kortkoder lenger bli behandlet. Hvis du planlegger å endre bloggdesignet i fremtiden, er det bedre å plassere koden til alle kortkoder i én fil, for eksempel, shortcodes.php, og legg den i en mappe min ved roten av nettstedet.

I dette tilfellet må du organisere samtalen ved å sette inn i filen funksjoner.php kommando require_once('my/shortcodes.php');

Etter å ha endret eller oppdatert WordPress-temaet, ikke glem å registrere denne kommandoen på nytt.

Slik setter du inn en kortkode på en WordPress-side

For at kortkoden skal fungere, må du sette inn kallet på riktig sted i innholdet, bestående av firkantede parenteser, navnet på kortkoden og parametere. Samtidig kan du dekorere den med alle stiler, akkurat som den vanlige teksten i innlegget.

Jeg håper det er nok eksempler slik at du selv kan lage en wordpress-kortkode som løser oppgavene du trenger.

Se en videoopplæring om å lage mer komplekse kortkoder her:

Kortkoder er PHP-funksjoner som kan brukes i innleggsinnhold ved å bruke betingelser.

For eksempel lar en standard WordPress-kortkode deg vise et galleri i et innlegg.

Det er tydelig at denne funksjonaliteten gir WordPress-utviklere fantastiske muligheter – i dag er det svært relevant å sette inn skjemaer, knapper, skyveknapper i innlegg.

Akkurat som en funksjon kan ha argumenter, kan en kortkode ha sine egne parametere. Et annet kortkodeeksempel:

Du kan lime inn koden i functions.php-filen (jeg mener den i din nåværende temakatalog).

Navnet på kortkoden må være med små bokstaver og kun inneholde latinske bokstaver, tall og understreking.

Kortkode med parametere

Ok, jeg skrev allerede at kortkoder kan ha sine egne parametere, la oss nå se hvordan det gjøres.

Som et eksempel skrev jeg en kortkode som ganske enkelt setter inn en lenke i et innlegg som åpnes i en ny nettleserfane target="_blank" . Jeg tror ikke at det faktisk kan være nyttig, men for oss nå er det viktigste å forstå selve prinsippet om hvordan kortkoder fungerer.

Det vil være to parametere: anker og url - henholdsvis anker (lenketekst) og URL. Hvis parameteren ikke er spesifisert i selve kortkoden, vil standardverdien som er satt i funksjonen brukes.

Lukkekortkoder og en kortkode inne i en kortkode

La oss ta kortkoden fra forrige eksempel og justere den litt. La meg minne deg på at kortkoden så slik ut:
.

Hva om vi gjør det på nytt slik: Link URL .

I tillegg kan andre kortkoder settes inn i lukkekortkoder (takket være funksjonen).

Følgelig, la oss omskrive koden vår fra forrige eksempel:

function true_url_external( $atts , $shortcode_content = null ) ( $params = shortcode_atts( array ( "anchor" => "Misha Rudrastykh") , $atts ) ; returner """ target="_blank">($params[ "anker"]); ) add_shortcode( "trueurl" , "true_url_external" ) ;

Nå vil kortkoden av følgende type vise en lenke til hovedsiden på nettstedet ditt (jeg skrev om kortkoden ovenfor).

Legge til en kortkodeinnsettingsknapp i TinyMCE Visual Post Editor

Det er klart at det vil være mye mer praktisk å sette inn en kortkode gjennom den innebygde TinyMCE-editoren, og hvis det også er implementert et grensesnitt som lar deg angi kortkodeparametere, er det generelt kult.

1.PHP

Uansett om knappen din skal være tekst eller med et ikon, om den vil inneholde flere inndatafelt (kortkodeparametere) eller ikke - i alle tilfeller vil PHP-koden for knappregistrering være den samme.

// Hooks-funksjon true_add_mce_button() ( // sjekk brukerens rettigheter - kan han redigere innlegg og sider if ( !current_user_can( "edit_posts" ) && !current_user_can( "edit_pages") ) ( return ; // hvis den ikke kan, trenger den heller ikke knappen, i dette tilfellet går du ut av funksjonen } // sjekk om brukeren har den visuelle editoren aktivert i innstillingene (hvis ikke, er det ikke nødvendig å koble til knappen) if ( "true" == get_user_option( "rich_editing") ) ( add_filter ( "mce_external_plugins", "true_add_tinymce_script") ; add_filter ( "mce_buttons" , "true_register_mce_button" ) _but "ad" _d" _d" _d; // I denne funksjonen angir vi en lenke til JavaScript-filen til knappen funksjon true_add_tinymce_script( $plugin_array ) ( $plugin_array [ "true_mce_button" ] = get_stylesheet_directory_uri() ."/true_button.js" ; returner $plugin_array ; ) // Registrer knappen i editoren funksjon true_register_mce_button( $buttons ) ( array_push ( $buttons , "true_mce_button" ) ; // true_mce_button - knappidentifikator return $knapper ; )

I dette eksemplet brukte jeg . true_button.js - selve knappen, lag denne filen i temakatalogen (eller hvor du vil, men ikke glem å endre banen til den i dette tilfellet).

2.1. JavaScript. Enkelt knappeksempel

La oss ta en titt på innholdet i true_button.js-filen. Så la oss starte med å lage en enkel knapp som vil sette inn en kortkode.

(function () ( tinymce.PluginManager .add ("true_mce_button" , function ( editor, url ) ( // true_mce_button - Knapp-ID editor.addButton("true_mce_button" , ( // true_mce_button - knappen ID, må være den samme overalt tekst: "" , // knapptekst, hvis du vil at knappen skal inneholde bare et ikon, fjern denne linjen tittel: "Sett inn kortkode", // verktøytips ikon: falsk // her kan du spesifisere hvilke som helst av de eksisterende vektorikonene i TinyMCE eller din egen CSS-klasse onclick: function () ( editor.insertContent("" ) ; // lim inn kortkoden i editoren, du kan også angi hvilken som helst jQuery-handling } } ) ; } ) ; } ) () ;

Som et resultat:

Tekstversjonen av knappen for innsetting av kortkode i det visuelle redigeringsprogrammet for TinyMCE.

2.2. Knapp med et ikon, en rullegardinliste og muligheten til å angi kortkodeparametere

Jeg starter med å sette inn (eller rettere sagt erstatte) koden i true_button.js-filen:

(function () ( tinymce.PluginManager.add("true_mce_button" , function ( editor, url ) ( // button id true_mce_button må være den samme overalt editor.addButton( "true_mce_button" , ( // button id true_mce_button icon: "perec" , // min egen CSS-klasse, takket være hvilken jeg vil sette ikonet for knappen type: "menyknapp", tittel: "Sett inn element", // hover verktøytips Meny: [ // første rullegardinliste starter her( tekst: "Skjemaelementer" , meny: [ // det er her den andre rullegardinmenyen starter inne i den første( tekst: "Tekstfelt" , onclick: function () ( editor.windowManager.open( ( tittel: "Angi feltalternativer", body: [ ( skriv inn: "tekstboks" , navn: "tekstboksnavn" , // ID, vil bli brukt nedenfor merkelapp: "ID og navn på tekstfeltet", // etikettverdi: "kommentar" // standardverdi), ( skriv inn: "tekstboks" , // tekstbokstype = tekstboks navn: "multilineName" , etikett: "Standardverdi for tekstfelt", verdi: "Hei" , multiline: true , // stort tekstfelt - tekstområde minBredde: 300 // minste bredde i piksler min Høyde: 100 // minimumshøyde i piksler), ( skriv inn: "listeboks" , // type listeboks = velg rullegardinliste navn: "listboxName" , label: "Fill" , "values" : [ // rullegardinlisteverdier( tekst: "Obligatorisk" , verdi: "1") , // etikett, verdi(tekst: "Valgfri", verdi: "2") ] ) ] , onsubmit: funksjon ( e ) ( // dette vil skje etter å ha fylt ut feltene og trykket på send-knappen editor.insertContent( "" ) ; ) ) ) ; ) ) , ( // andre element i den nestede rullegardinlisten, setter bare inn en kortkode tekst: "Send inn-knapp", onclick: function () ( editor.insertContent("" ) ; ) ) ] ) , ( // andre element i den første rullegardinlisten, bare setter inn tekst: "Shortcode " , onclick: function () ( editor.insertContent("" ) ; ) ) ] ) ) ; ) ) ; ) ) ();

Etter å ha limt inn koden, er knappen min allerede der og fungerer. Det eneste er at den ikke har noe ikon (vel, bortsett fra pil ned).

Hva annet å lese