Kā pievienot pielāgotus stilus WordPress vizuālajam redaktoram

/

Vai vēlaties pievienot pielāgotus stilus WordPress vizuālajā redaktorā? Pielāgotu stilu pievienošana ļauj ātri pielietot formatējumu, nepārslēdzoties uz teksta redaktoru. Šajā rakstā mēs parādīsim, kā pievienot pielāgotus stilus WordPress vizuālajam redaktoram.

Pielāgotu stilu pievienošana WordPress vizuālajā redaktorā

Piezīme. Šī apmācība prasa CSS pamatzināšanas.

Kāpēc un kad jums ir nepieciešami pielāgoti stili WordPress vizuālajam redaktoram

Pēc noklusējuma WordPress vizuālajā redaktorā ir dažas pamata formatēšanas un stila opcijas. Tomēr dažreiz jums var būt nepieciešami pielāgoti stili, lai pievienotu CSS pogas, satura blokus, atzīmes utt.

Jūs vienmēr varat pārslēgties no vizuālā uz teksta redaktoru un pievienot pielāgotu HTML un CSS. Bet, ja jūs regulāri lietojat dažus stilus, vislabāk tos būtu pievienot vizuālajā redaktorā, lai jūs varētu tos viegli atkārtoti izmantot.

Tas ietaupīs jūsu laiku, kas pavadīts, pārslēdzoties starp tekstu un vizuālo redaktoru. Tas arī ļaus jums konsekventi izmantot tos pašus stilus visā jūsu vietnē.

Vissvarīgākais ir tas, ka jūs varat viegli pielāgot vai atjaunināt stilus, nerediģējot ziņas savā vietnē.

To pateicot, apskatīsim, kā pievienot pielāgotus stilus WordPress vizuālajā redaktorā.

1. metode: pievienojiet pielāgotos stilus vizuālajā redaktorā, izmantojot spraudni

Vispirms jums jāinstalē un jāaktivizē spraudnis TinyMCE Custom Styles. Lai iegūtu sīkāku informāciju, skatiet mūsu soli pa solim norādījumus par to, kā instalēt WordPress spraudni.

Pēc aktivizēšanas jums jāapmeklē lapa Iestatījumi »TinyMCE pielāgotie stili, lai konfigurētu spraudņa iestatījumus.

TinyMCE pielāgoto stilu iestatījumi

Spraudnis ļauj jums izvēlēties stilu lapas failu atrašanās vietu. Tajā var izmantot jūsu šablonu vai bērnu šablonu stilu lapas vai arī izvēlēties savu pielāgoto atrašanās vietu.

Pēc tam jums ir jānoklikšķina uz pogas Saglabāt visus iestatījumus, lai saglabātu izmaiņas.

Tagad jūs varat pievienot savus pielāgotos stilus. Jums nedaudz jāpārvietojas uz leju līdz stila sadaļai un noklikšķiniet uz pogas Pievienot jaunu stilu.

Vispirms jums jāievada stila nosaukums. Šis nosaukums tiks parādīts nolaižamajā izvēlnē. Tālāk jums jāizvēlas, vai tas ir iekļauts, bloķēts vai atlases elements.

Pēc tam pievienojiet CSS klasi un pēc tam pievienojiet savus CSS noteikumus, kā parādīts zemāk esošajā ekrānuzņēmumā.

Jauna stila pievienošana

Kad esat pievienojis CSS stilu, vienkārši noklikšķiniet uz pogas Saglabāt visus iestatījumus, lai saglabātu izmaiņas.

Tagad varat rediģēt esošu ziņu vai izveidot jaunu. WordPress vizuālā redaktora otrajā rindā pamanīsit nolaižamo izvēlni Formāts.

Pielāgota stila izvēlne TinyMCE

Redaktorā vienkārši atlasiet tekstu un pēc tam nolaižamajā izvēlnē Formāti atlasiet pielāgoto stilu, lai to lietotu.

Tagad varat priekšskatīt ziņu, lai pārliecinātos, ka pielāgotie stili tiek lietoti pareizi.

2. metode: Pielāgotu stilu pievienošana manuāli WordPress Visual Editor

Šī metode prasa manuāli pievienot kodu WordPress failiem. Ja jūs pirmo reizi pievienojat kodu WordPress, lūdzu, skatiet mūsu ceļvedi par koda fragmentu pievienošanu no tīmekļa WordPress.

1. darbība: pievienojiet pielāgotu stilu nolaižamo izvēlni WordPress Visual Editor

Pirmkārt, mēs pievienosim nolaižamo izvēlni Formāti WordPress vizuālajā redaktorā. Pēc tam šī nolaižamā izvēlne ļaus mums izvēlēties un lietot pielāgotos stilus.

Šablona funkcijām.php failam vai vietnei raksturīgam spraudnim jāpievieno šāds kods.

<?php
function wpb_mce_buttons_2($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;  
}
add_filter('mce_buttons_2', 'wpb_mce_buttons_2');  

2. solis: nolaižamajā izvēlnē pievienojiet atlases opcijas

Tagad jums būs jāpievieno opcijas tikko izveidotajai nolaižamajai izvēlnei. Pēc tam varēsiet atlasīt un lietot šīs opcijas nolaižamajā izvēlnē Formāti.

Šīs apmācības labad mēs pievienojam trīs pielāgotos stilus, lai izveidotu satura bloku un pogas.

Tēmas failiem functions.php vai vietnes spraudnim būs jāpievieno šāds kods.

<?php
/*  * Callback function to filter the MCE settings  */
function my_mce_before_init_insert_formats( $init_array ) {
    // Define the style_formats array 
    $style_formats = array(
        /*
         * Each array child is a format with it's own settings
         * Notice that each array has title, block, classes, and wrapper arguments
         * Title is the label which will be visible in Formats menu
         * Block defines whether it is a span, div, selector, or inline style
         * Classes allows you to define CSS classes
         * Wrapper whether or not to add a new block-level element around any selected elements
        */
        array(
            'title' => 'Content Block',
            'block' => 'span',
            'classes' => 'content-block',
            'wrapper' => true,                      
        ),
        array(
            'title' => 'Blue Button',
            'block' => 'span',
            'classes' => 'blue-button',
            'wrapper' => true,          
        ),
        array(
            'title' => 'Red Button',
            'block' => 'span',
            'classes' => 'red-button',
            'wrapper' => true,          
        ),      
    );
    // Insert the array, JSON ENCODED, into 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );
    return $init_array;        
} 
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );   

Tagad WordPress varat pievienot jaunu ziņu un Visual redaktorā noklikšķiniet uz nolaižamās izvēlnes Formāti. Jūs ievērosiet, ka jūsu pielāgotie stili tagad ir redzami zem formātiem.

Tomēr to atlase ziņu redaktorā šobrīd neko nemaina.

3. darbība: pievienojiet CSS stilus

Tagad pēdējais solis ir CSS stila noteikumu pievienošana pielāgotajiem stiliem.

Šī CSS būs jāpievieno šablonu vai bērnu šablonu failiem style.css un editor-style.css.

.content-block {
border:1px solid #eee;
padding:3px;     
background:#ccc;
max-width:250px;
float:right;
text-align:center;  
}
.content-block:after {
clear:both;  
} 
.blue-button {
background-color:#33bdef;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #057fd0; 
display:inline-block;
cursor:pointer;     
color:#ffffff;
padding:6px 24px; 
text-decoration:none;  
}
.red-button {

background-color:#bc3315;
-moz-border-radius:6px;
-webkit-border-radius:6px;      
border-radius:6px;
border:1px solid #942911;   
display:inline-block;   
cursor:pointer;     
color:#ffffff;      
padding:6px 24px;   
text-decoration:none;  
}  

Pielāgoti stili WordPress ziņu redaktorā

Redaktora stila lapa kontrolē jūsu satura izskatu vizuālajā redaktorā. Pārbaudiet šablona dokumentāciju, lai uzzinātu šī faila atrašanās vietu.

Ja jūsu šablonam nav redaktora stila lapas faila, vienmēr varat to izveidot. Vienkārši izveidojiet jaunu CSS failu un nosauciet to custom-editor-style.css.

Šis fails ir jāaugšupielādē šablona saknes direktorijā un pēc tam jāpievieno šis kods šablona failā functions.php.

<?php
function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );  
}
add_action( 'init', 'my_theme_add_editor_styles' );  

Tas ir viss. Jūs esat veiksmīgi pievienojis pielāgotos stilus WordPress vizuālajā redaktorā. Jūtieties brīvi spēlēties ar kodu, pievienojot savus elementus un stilus.

Mēs ceram, ka šis raksts palīdzēja jums uzzināt, kā pievienot pielāgotus stilus WordPress vizuālajam redaktoram. Iespējams, vēlēsities redzēt arī mūsu ceļvedi par to, kā pielāgotus stilus pievienot WordPress logrīkiem.

Nepieciešāma palidzība ar WordPress? Sazinieties tagad
[email protected]

Tā ir oriģinālās publikācijas wpbeginner tulkojums, viss tā saturs, bildes un autortiesības pieder to autoriem

Kā importēt / eksportēt WordPress Gutenberg blokus (2 soļi)

Vai zinājāt, ka jaunais WordPress bloku redaktors aka Gutenberg ļauj saglabāt pielāgotos satura blokus un eksportēt tos lietošanai citās jūsu WordPress vietnēs. Šī mazpazīstamā funkcija ir ļoti noderīga, un vai jūs varat ietaupīt daudz laika,

Kā viegli pārvietot WordPress uz jaunu domēnu (nezaudējot SEO)

Vai vēlaties pārvietot savu WordPress vietni uz jaunu domēnu? Vietnes domēna nosaukuma maiņa var būtiski ietekmēt jūsu SEO rangu, un tas ir process, kas jāveic ļoti uzmanīgi. Kaut arī jūs nevarat izvairīties no īslaicīgām SEO svārstībām, pārvietojot

Kā pievienot Facebook Giveaway WordPress, lai veicinātu iesaisti

Vai vēlaties palielināt iesaistīšanos savā vietnē, vienlaikus palielinot savus Facebook sekotājus? Ja jūsu atbilde ir apstiprinoša, jums jāuzsāk Facebook konkurss. Giveaway var palīdzēt pievērst lietotāju uzmanību jūsu Facebook lapai un iegūt

Kā blogot anonīmi, izmantojot WordPress

Vai vēlaties blogot anonīmi, izmantojot WordPress? Ir daudzi lietotāji, kuri vēlas izveidot blogu, bet nedara to, ko tajā ievietot. Šajā iesācēju ceļvedī mēs jums parādīsim, kā ērti anonīmi rakstīt blogus, izmantojot WordPress, vienlaikus saglabājot