Skript for å forstørre bilder på WordPress. Skript for å øke bildet når du klikker på Tilleggsknapper i html-editoren for Highslide JS

Hallo! Det skjer slik: du går til en blogg, ser et skjermbilde, men det som er i den er ikke synlig i det hele tatt. Så du tenker, hva ønsket forfatteren av dette innlegget å vise i det? Men det er en vei ut - et skript for å forstørre bildet når det klikkes!

Veldig kul ting, dette manuset. Se selv, klikk for å forstørre:

(Klikkbar)

Faktisk er det mange forskjellige effekter for å forstørre et bilde i en bloggartikkel, men denne effekten er etter min mening den beste.

Hvem vil dra nytte av dette bildeforstørrelsesskriptet?

Først av alt, de som tar skjermbilder med forklaringer. For eksempel, hvis du bestemte deg for å ta et omfangsrikt skjermbilde for artikkelen din, tegnet du noe der, for å gjøre materialet mer forståelig, kastet du det inn i artikkelen, men det passer rett og slett ikke helt inn på bloggsiden din, så WordPress tar automatisk det klemmer for ikke å gå utover grensene til siden. Og etter komprimering er synlighet og lesbarhet kraftig redusert. Dette har skjedd meg mer enn én gang, så jeg bestemte meg for å bruke dette skriptet for å forstørre et bilde uten å miste kvalitet.

Hvis du rett og slett du vil ikke plassere tredimensjonale bilder i artikkelen. Det hender at du trenger å vise mange bilder i en artikkel, men du vil ikke at disse bildene skal ta mye plass, da er å installere et skript det beste alternativet! Og generelt, hvis du ikke vil legge ut tredimensjonale bilder, er dette skriptet ganske enkelt nødvendig.

Flott. Nå må vi installere skriptet på nettsiden vår. Installasjonen skjer i 3 trinn:

Last ned skriptet og plasser det i rotkatalogen på nettstedet ditt.

Vi installerer den nødvendige koden på nettstedet ditt.

Vi legger til bildet i artikkelen og konfigurerer visningen.

Så la oss begynne.

Det andre trinnet er å installere skriptkoden. Hvor installerer jeg koden? Du kan installere i header.php, footer.php, function.php, index.php, men jeg installerer vanligvis i footer.php, før taggen, slik at koden lastes sist.

Her er selve koden:

// Bildeparametere"og i avsnitt" Link"velg" Mediefil" .

Hei kjære nybegynneroptimalisatorer.

I WordPress blir brukeren som standard tatt til bildesiden når du klikker på et bilde. Enig - det er veldig upraktisk når du plutselig blir overført til en annen side.

For at bildet skal forstørres direkte på siden det er plassert på, må du installere et spesielt skript på nettstedet.

Du kan se hvordan det fungerer på bildet over eller på bildene i sidefeltet.

Å finne det på Internett er ikke noe problem, men dessverre har alle tilbud én feil. Skriptkoden, når den er sjekket i validatoren, produserer en feil.

Jeg måtte anstrenge meg litt og rette opp denne situasjonen, så det som følger blir et script som fungerer perfekt på alle maler og er gyldig.

Metoden for å installere den er tilgjengelig selv for de som ikke vet noe om skript og programmeringsspråk generelt.

Samtidig, med utmerkede resultater, lar den deg klare deg uten en plugin, og krever obligatorisk fylling av alt-taggen med passende tekst, og dette vil ha en veldig god effekt på nettstedoptimalisering.

Det er ingen hemmelighet at plugins senker lastehastigheten, siden mange av dem plasserer skriptene sine i hodeblokken.

Og å fylle ut alt-taggen er ofte rett og slett for mye tid. Akkurat der, enten du liker det eller ikke, må du skrive inn den aktuelle teksten, siden den vil vises som en signatur under det forstørrede bildet.

Du kan ganske enkelt angi nummerering etter side hvis det er mange bilder.

En annen funksjon er at skriptet ikke forstørrer alt, men bare de bildene du peker på.

Komfortabel? Komfortabel. Tross alt, hvis et bilde i sin opprinnelige størrelse passer perfekt på siden, hvorfor forstørre det.

La oss gå videre til installasjonen.

Du kan få zip med skriptet helt gratis ved å laste det ned fra Yandex-disken min. nedlasting

Etter det må du laste den opp til roten av nettstedet. Kjernemappen er mappen som inneholder wp-admin, wp-innhold og så videre.

Vi laster ned zip-en via FTP, pakker den ut, hvoretter tre filer og en mappe vises i katalogen.

ZIP-mappen må slettes. Også, nå må du fjerne, hvis det var, en plugin som forstørrer bilder.

Den neste handlingen må gjøres i footer.php-filen. Du kan gå gjennom wp-content - temaer - Ditt tema - footer.php uten å forlate serveren.

Eller du kan gå til sidekonsollen og deretter Utseende - Redaktør - footer.php, eller Footer. Og det og det er mulig.

I denne filen, helt på slutten, før taggen, må du sette inn følgende kode:

(funksjon())(
var bokser=,els,i,l;
if(document.querySelectorAll)(
els=document.querySelectorAll("a");
Box..css");
Box..js",function())(
simplebox.init();
for(i=0,l=els.lengde;i

< link rel ="stylesheet" type ="text/css" href ="/highslide-4.1.13/highslide/highslide.css" />

hs. graphicsDir = "/highslide-4.1.13/highslide/graphics/" ;

hs. wrapperClassName = "wide-border" ;

Nå må den ferdige koden plasseres i hodedelen før den avsluttende taggen. På WordPress-bloggen min plasserte jeg den i footer.php-filen til temaet jeg brukte, før den avsluttende taggen.

La oss begynne å redigere den andre koden, som vi setter inn direkte på sider med tekst for å forstørre bildet når du klikker. La oss redusere den til følgende form for enkel bruk:

Legge til tekst i et popup-bilde

La oss nå kaste ut alt unødvendig fra highslide-4.1.13-katalogen.

Finn highslide-mappen, åpne den og slett alt unntatt grafikkmappen, og de inkluderte filene highslide-full.js, highslide.css, highslide-ie6.css. Plasser highslide-4.1.13 i rotkatalogen på nettstedet ditt. Manuset er klart til å fungere. Du kan laste opp bilder, plassere skriptkoden på siden og nyte effekten av å forstørre bildet når du klikker på det.

For at Highslide JS-skriptet skal fungere riktig i WordPress, må ett problem først løses. Når du flytter fra html-editoren til den visuelle, forsvinner en del av skriptkoden - onclick="return hs.expand(this)" .
Åpne functions.php-filen til temaet du bruker og legg til følgende kode nederst, før?>.

// filterfunksjon change_mce_options($initArray) ( $initArray["verify_html"] = false; $initArray["cleanup_on_startup"] = false; $initArray["cleanup"] = false; $initArray["forced_root_block"] = usant; $initArray["validate_children"] = usann; $initArray["remove_redundant_brs"] = usann; $initArray["remove_linebreaks"] = usann; $initArray["force_p_newlines"] = usann; $initArray["force_br_newlines"] = $initArray["fix_table_elements"] = usant; $initArray["entities"] = "160,nbsp,38,amp,60,lt,62,gt"; return $initArray; ) add_filter("tiny_mce_before_init", "change_mce_options" );

// filter

function change_mce_options($initArray)(

$ initArray [ "verify_html" ] = usann;

$ initArray [ "cleanup_on_startup" ] = usant ;

$initArray["cleanup"] =false;

$ initArray [ "forced_root_block" ] = usant ;

$ initArray [ "validate_children" ] = usant ;

$ initArray [ "remove_redundant_brs" ] = usant ;

$ initArray [ "remove_linebreaks" ] = usant ;

$ initArray [ "force_p_newlines" ] = usann ;

$ initArray [ "force_br_newlines" ] =false ;

$ initArray [ "fix_table_elements" ] = usann;

$ initArray [ "entities" ] ="160,nbsp,38,amp,60,lt,62,gt" ;

returner $initArray;

add_filter ("tiny_mce_before_init" , "change_mce_options" );

Vi lagrer endringene, problemet er løst.

For å gjøre det enklere å bruke skriptet til å forstørre bilder når du klikker på det, kan du legge til flere knapper i WordPress html-redigeringsprogram.

Ekstra knapper i html-editoren for Highslide JS

Åpne functions.php-filen til temaet du bruker igjen og lim inn følgende kode helt nederst, før?>.

// Ekstra knapper html editor add_action("admin_print_footer_scripts", "add_sheens_quicktags"); funksjon add_sheens_quicktags() ( ?> if (QTags) ( // QTags.addButton(id, display, arg1, arg2, access_key, tittel, prioritet, forekomst); QTags.addButton("add_div", "div", "", "", "d", "Div tag", 1); QTags.addButton("add_mo1", "mo1", " " , "", "m", "Forstørr bilde", 2); QTags.addButton("add_mo2", "mo2", "" , "", "m", "Caption for picture", 3); QTags. addButton("add_float-r", "float-r", "" , "", "f", "Skriv bildet til høyre", 4); QTags.addButton("add_float-l", "float-l ", " " , "", "f", "Skriv rundt bildet til venstre", 5); )