Hvernig á að bæta sérsniðnum stíl við WordPress Visual Editor

Hvernig á að bæta sérsniðnum stíl við WordPress Visual Editor

Skoðaðu WordPress sjón ritstjórann þinn. Það eru nokkrir venjulegir möguleikar til að forsníða og stíla innihaldið þitt, en ekki mikið hvað varðar aðlögun til að láta færslurnar þínar og síðurnar líta út fyrir að vera svolítið flott.


WordPress ritstjóri

Nú gætirðu vitað að þú hefur getu til að hoppa fram og til baka á milli texta- og sjónrænna ritstjóra í WordPress til að henda inn einhverjum CSS til að búa til hluti eins og hnappa og textablokkir, en þetta er sárt og ef þú ert ekki með mikil reynsla af því að breyta kóða Textaritillinn virðist svolítið hræða.

Væri ekki bara auðveldara ef þú gætir búið til þína eigin sérsniðna stíl, sett þá í fellivalmynd í WordPress ritstjóra og valið að nota þá hvenær sem þú þarft á þeim að halda? Já, það er miklu auðveldara, svo við viljum útlista hvernig á að gera það hér. Hafðu í huga að þrátt fyrir að við reynum að gera þetta ferli eins einfalt og mögulegt er, þá hjálpar það að hafa smá CSS þekkingu ef þú vilt uppgötva fullan ávinning af sérsniðnum stílum.

Við skulum kíkja á hvernig bæta má sérsniðnum stíl við sjónræna ritstjóra WordPress.

Bættu sérsniðnum stílum við WordPress Visual Editor með því að bæta við kóða

Þessi fyrsti valkostur krefst þess að þú vitir svolítið um hvernig eigi að fella og breyta CSS, en ég mun gefa þér smá göngutúr til að hjálpa þér að læra grunnatriðin svo þú getir notað þessa þekkingu í framtíðinni. Þetta er ágætur kostur ef þú vilt ekki vega og meta síðuna þína með viðbót.

Aðalatriðið með þessu er að bæta við nýjum fellivalmynd sem inniheldur sérsniðna stíl í WordPress sjónritaranum þínum, sem gefur þér möguleika á að velja þætti í ritlinum þínum og nota síðan sérsniðna stíl á þá. Finndu þinn aðgerðir.php skrá og settu kóðann hér að neðan í þá skrá eða ef þú ert að vinna með nú þegar innbyggt þema líma þennan kóða í aðgerðir barnsþema .php skrá.

virka myprefix_mce_buttons_1 ($ hnappar) {
array_unshift ($ hnappar, 'stílsval');
skila $ hnappum;
}

add_filter ('mce_buttons_1', 'myprefix_mce_buttons_1');

Farðu aftur í ritstjórann í einu af WordPress færslunum þínum og nú ættirðu að sjá nýjan „Snið“ hnapp í efstu röð ritstjórans. Taktu eftir því hvernig við tengdum okkur við „mce_buttons_1? Þetta setur snið valmyndarhnappinn í fyrstu röðinni á mce ritlinum. Þú getur líka notað „mce_buttons_2“ síuna til að setja hana í aðra röðina eða „mce_buttons_3“ til að setja hana í 3. röðina.

Svo nú þegar þú hefur gert valmyndaratriðið virkt er kominn tími til að bæta við sérsniðnum stíl til að nota innan færslna þinna. Taktu kóðann hér að neðan og límdu hann í þinn aðgerðir.php skrá sem bætir við tveimur nýjum stíl við fellivalmyndina Snið – „Þemahnappur“ og „Hápunktur“.

/ **
* Bættu við sérsniðnum stíl við fellivalmyndina mce snið
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
virka myprefix_add_format_style ($ init_array) {
$ style_formats = fylki (
// Hvert fylkisbarn er snið með eigin stillingum - bættu við eins mörgum og þú vilt
fylki (
'title' => __ ('Þemahnappur', 'textalén'), // Titill fyrir fellivalmynd
'selector' => 'a', // Element til að miða í ritstjóra
'flokkar' => 'þemahnappur' // Flokkunafn notað fyrir CSS
),
fylki (
'title' => __ ('Highlight', 'text-domain'), // Titill fyrir fellivalmynd
'inline' => 'span', // Vefðu span um valda efnið
'Classes' => 'text-highlight' // Class name notað fyrir CSS
),
);
$ init_array ['style_formats'] = json_encode ($ style_formats);
skila $ init_array;
}
add_filter ('pínulítill_mce_before_init', 'myprefix_add_format_style');

Þú getur breytt titlunum til að sýna mismunandi nöfn í fellivalmyndinni, bæta við / fjarlægja hluti úr fylkingunni o.s.frv. Þú getur breytt nánast hverju sem er í þessum kóða til að sýna eigin sérsniðna sniðstíl, vertu viss um að kíkja á WordPress Codex til að fá ítarlegri skýringu á samþykktum breytum og skilagildum.

Nú þegar þú ert með nýja stíl geturðu bent á efni í ritlinum þínum og beitt þeim. Taktu eftir, hvernig snið „Þemuhnappur“ hefur færibreytu fyrir val? Þetta þýðir að aðeins er hægt að nota stílinn á þann sérstaka val (í þessu tilfelli merkið „a“ eða „hlekkur“). Annað sniðið sem við bættum við „Highlight“ er ekki með stika fyrir val heldur frekar „inline“ færibreyt sem segir honum að nota stílinn á hvaða texta sem þú hefur auðkennt í ritlinum þínum og vefja hann í röð með einstaka bekkjarnafni þínu. Þú getur séð dæmi úr Total WordPress þema okkar um hvernig við höfum notað snið svo notendur geti auðveldlega beitt gátlistaútliti á hvaða skotum sem er í ritlinum.

tékklisti

Svo þú getur núna notað sérsniðnu sniðin þín, en þau líta ekki öðruvísi út fyrr en þú hefur bætt við einhverjum sérsniðnum CSS á síðuna þína til að stíl þá. Þú ættir að finna sniðmát fyrir þemað þitt (ef þú byggir þitt eigið) eða barnaþema og líma eftirfarandi CSS kóða í skrána.

.þemahnappur {
sýna: inline-block;
padding: 10 15px;
litur: #fff;
bakgrunnur: # 1796c6;
textaskreyting: engin;
}
.þemahnappur: sveima {
textaskreyting: engin;
ógagnsæi: 0,8;
}
.texta-hápunktur {
bakgrunnur: # FFFF00;
}

Nú, þetta er að fara að bæta stíl við nýju sniðin þín í framhlið svo þegar þau eru notuð geturðu séð þau í beinni útsendingu. Já! En væri ekki gaman að sjá líka stílana þína í raunverulegum ritstjóra þegar þeim er beitt? Til að gera þetta þarftu að nota „ritstílsnið“ aðgerðina í WordPress. Ef þú ert að byggja þitt eigið þema þá viltu búa til nýja css skrá í þemað þitt sem kallast “editor-style.css” (þú getur nefnt það hvað sem þú vilt, bara vertu viss um að breyta sniðinu hér að neðan í samræmi við það) með sérsniðnu CSS bætt við fyrir sniðin þín og bættu síðan við aðgerðinni hér að neðan til að hlaða hana í backend.

virka myprefix_theme_add_editor_style () {
add_editor_style ('editor-style.css');
}
add_action ('init', 'myprefix_theme_add_editor_style');

Ef þú ert að vinna með þema einhvers annars þá verður þú að bæta þessu við í þema barns þíns, vertu bara viss um að gefa því einstakt nafn svo það stangist ekki á við foreldra þema þitt eða ef foreldra þema þitt er þegar með CSS skrá fyrir ritstjórinn þú getur raunverulega afritað það og límt það í þema barnsins þíns (án þess að bæta PHP kóðanum hér að ofan), bæta síðan við nýju CSS því WordPress mun athuga barn þemað fyrst áður en þú hleður ritstjóra CSS skjal foreldra þema og ef það staðsetur það mun það hlaðið það í staðinn fyrir barnið.

Bættu sérsniðnum stílum við WordPress Visual Editor með fallegu tappi

Ef þú hefur ekki tíma til að leika þig með kóða, eða þú getur ekki áttað þig á því sjálfur, eru góðar fréttir. Það er til viðbótar sem gerir þér kleift að klára nákvæmlega það sem við gerðum hér að ofan án þess að þurfa að skrúfa með kóðanum.

TinyMCE sérsniðin stíl viðbót

Leitaðu einfaldlega að, setja upp og virkja TinyMCE sérsniðin stíl viðbót og virkjaðu það á WordPress síðuna þína.

Stillingar TinyMCE sérsniðinna stíl

Fara til Stillingar> TinyMCE prof.style vinstra megin við WordPress mælaborðið. Þetta er þar sem þú breytir stillingum þínum fyrir viðbótina.

Stillingar TinyMCE sérsniðinna stíl

Viðbótin gerir þér kleift að velja hvar sniðmátin þín eru eða hvar þú vilt setja þau. Mælt er með því að búa til nýja sérsniðna skrá. Veldu þriðja valkostinn og gefðu skráasafni þínu nafn og farðu síðan niður á síðuna til að smella á þitt Vista stillingar valkost áður en haldið er áfram í næsta skref.

TinyMCE sérsniðin stíll Bæta við nýjum

Þegar þú hefur vistað stillingarnar skrunaðu niður til að velja hnappinn Bæta við nýjum stíl.

Valkostir TinyMCE sérsniðinna stíl

Þetta er þar sem þú sérsniðir hvernig þú vilt að sérsniðna stíll þinn líti út. Það er í grundvallaratriðum einfaldur ritstjóri á netinu sem býr til CSS kóða fyrir þig. Sláðu inn titil fyrir hvað sem þú vilt sýna í fellivalmyndinni. Veldu hvort þú vilt velja gerð, inline eða blokk. Ekki hika við að nota skjámyndina hér að ofan til að fylla út CSS flokka og stíla, eða búa til þína eigin eftir því hvað þú ætlar að nota fellivalmyndina fyrir. Þegar þessu er lokið smellirðu á Vista stillingar neðst á síðunni.

TinyMCE sérsniðið stíl snið

Nú er kominn tími til að sjá hvernig nýja sérsniðna stílinn lítur út í ritlinum þínum. Opnaðu nýja færslu eða síðu og finndu fellivalmyndina Snið vinstra megin við Visual ritstjórann. Það birtist í annarri línunni. Þegar þú hefur smellt á fellivalmyndina mun það opinbera nýjan stíl sem þú varst búinn til.

TinyMCE sérsniðin stíl snið í notkun

Smelltu á Big Blue Button valmöguleikann, eða hvað sem þú bjóst til, til að sjá það opinberast í ritlinum þínum. Til að nota það einfaldlega auðkenndu textann sem þú vilt forsníða, smelltu síðan á valkostinn þinn og voila!

Niðurstaða

Það er allt í bili! Þú getur alltaf lært meira um hvernig á að nota nýja stíl með því að kíkja á WordPress kóðax síðu tileinkað þessu efni.

Láttu okkur vita í athugasemdahlutanum ef þú hefur einhverjar spurningar um hvernig eigi að bæta við sérsniðnum stíl við sjónræna ritstjóra WordPress. Og ekki hika við að deila öllum óvenjulegum stílum sem þú hefur búið til til að láta vefinn þinn líta svolítið flottari út!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map