Gå till innehållet

Lägga till en rullgardinsmeny med CSS i Visual Editor

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

I den här handledning kommer du att lära dig hur lätt omvandla textlänkar i attraktiva knappar i WordPress. Genom att följa den här procedurhandboken vet du hur du lägger till en rullgardinsmeny till den visuella redigeraren för WordPress vilket gör att du kan använda anpassade CSS-stilar på innehållet i din artikel.

Dessa anpassade CSS-stilar kan tillämpas på text i dina inlägg för att dekorera och formatera dem. De används till stor del för att skapa attraktiva och iögonfallande knappar för dina artiklar. Denna handledning kommer också att beskriva hur du skapar en CSS-stilknapp.

Om du vill ha ett enkelt sätt att lägga till attraktiva knappar i inlägg och sidor, är denna handledning för dig.

Det slutliga resultatet.

Slutresultatet av denna handledning blir att låta dig välja text i din artikel och sedan använda en stil på den via listrutan i artikelredigeraren.

När vi är klara kommer Visual Editor att se ut så här och innehålla ett "stilar" -element i form av en rullgardinsmeny:

Steg för steg-Styles-01

Med den nya menyn är det möjligt att tillämpa en CSS-stil på textlänken i din artikel för att skapa en knappeffekt utan att använda bilder. Länkarna kan se ut så här, även om utseendet är upp till dig:

Steg för steg-Styles-02

Detta tillvägagångssätt sparar inte bara din tid när du skapar en artikel, utan tillåter också alla bidragsgivare till din blogg att alltid kunna använda samma stilar för att dekorera knappar eller något annat inslag i artiklarna.

Säkerhetsinstruktioner.

I denna handledning kommer vi att redigera följande filer:

  • fonctions.php
  • style.css

Dessa två filer är en del av ditt tema, så vi kommer att arbeta med de versioner som är kopplade till det för närvarande aktiva temat på din blogg. Först och främst är det viktigt att göra en säkerhetskopia av dessa filer om något går fel.

För det andra är det tillrådligt att skapa ett barntema av ditt aktuella tema. Om du inte vet hur du skapar ett barntema. Om du använder ett barntema kommer du att se till att ditt aktuella tema uppdateras. Det är också värt att påpeka att om du ändrar temat, CES ändringar kommer att gå förlorade.

Men om du arbetar på en blogg under utveckling eller en lokal WordPress-installation behöver du inte skapa ett underordnat tema.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Tillägg av ett "Styles" -alternativ till menyn.

Listrutan "stilar" är faktiskt redan en del av WordPress Visual Editor, men den har inaktiverats som standard. För att aktivera det behöver du bara lägga till några koder i filen fonctions.php av ditt aktuella tema.

För att öppna filen och ändra den, gå till menyn » Apparence  »Klicka sedan på« Editeur I undermenyn. Om du har en engelsk version Gå till Utseende> Redaktör

Steg för steg-Styles-03

Kontrollera först att temat som för närvarande används av din blogg är valt i rullgardinsmenyn längst upp till höger på sidan. Jag håller för närvarande på att ändra filen fonctions.php Tjugo tolv tema men för dig kan det vara ett annat tema.

Klicka sedan på filen fonctions.php från listan med filer till höger på sidan för att börja redigera den. Kopiera och klistra in följande kod i filen. För bekvämlighet rekommenderar jag att du klistrar in den i slutet av filen, så att du enkelt kan hålla reda på vad du har lagt till filen.

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

När koden har lagts till i filen klickar du på uppdateringsknappen för att spara ändringarna. Om allt går bra bör du se att rullgardinsmenyn för stilval har lagts till i WordPress visuella inläggsredigerare.

Vi är dock inte färdiga än. Om du undersöker menyalternativen i den här nya rullgardinsmenyn kommer du att märka att dessa är stilar relaterade till Visual Editor för de andra knapparna.

vi vill Lägg till våra egna stilar i listan.

Skapa CSS-format för dina knappar.

I denna handledning ska vi skapa en knapp för våra textlänkar, men du kan lika enkelt skapa dekoration och formatering för alla andra typer av element.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Nu ska vi skapa CSS-stilar för knapparna. Du kan antingen skapa din egen CSS eller använda en av de många online-knappgeneratorapparna. CSS-knappgenerator är ett bra val så besök webbplatsen och skapa snabbt en knapp och kopiera sedan CSS. Gå sedan till "Utseende" och sedan till "Editor" och klicka på filen style.css i fillistan till höger. På engelska kommer du att ha Utseende> Sidan Editor> style.css

Återigen, bläddra till slutet av filen och klistra in CSS från knappen nedan i den eller använd din egen CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Uppdatera filen för att spara ändringarna.

Lägg till stilar i rullgardinsmenyn.

klicka nu åter på filen fonctions.php  och klistra in följande kod längst ner i filen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// 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
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// 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' );
// end of part II

Notera dessa rader i tabellen:

  • titel - det här är titeln som kommer att visas i rullgardinsmenyn
  • väljare - "a" hänvisar till ankaret, vilket indikerar att denna stil är för länkar.
  • klasser - det här är klassnamnet på vår CSS-knapp

Om du använde din egen CSS skulle klassnamnet vara vad du gav som namnet på din egen CSS-klass. I exemplet ovan kallas CSS-stilknappen linkButton.

När du har klistrat in koden i den klickar du på uppdateringsknappen för att spara ändringarna. Så snart filen sparas, gå till WordPress-postredigeraren och uppdatera fönstret så att ändringarna träder i kraft. Klicka sedan på rullgardinsmenyn "Stilar" så visas en post med titeln " linkbutton".

 

Steg för steg-Styles-05

För att tillämpa CSS-stil och skapa knappen, bara skapa en textlänk i din artikel, välj texten och välj sedan den stil du vill ge din knapp i menyn. Stilarna visas inte i fönstret för redigerare av inlägg. Du bör förhandsgranska artikeln, som ska se ut så här:

Steg för steg-Styles-06

Nu när du måste infoga en iögonfallande och attraktiv knapp i dina inlägg eller sidor, skapa bara en textlänk och välj sedan dess stil i rullgardinsmenyn.

Avancerade alternativ.

Hoppas du kan tänka på andra användningsområden för den här funktionen. Du kan till exempel lägga till ytterligare stilar i menyn. Det kan vara formateringen av utseendet på texten eller något annat du kan göra med CSS.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Om du vill skapa en extra knappstil som kommer att läggas till i rullgardinsmenyn, räcker det bara för att skapa en ny post i tabellen (som har lagts till i fonctions.php) Och ändra linjerna och titeln i klassen:

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Lägg sedan till en ny CSS-stil i filen style.css. Om du vill skapa stilar för objekt som inte är länkar kan du också göra det. Detta kräver en ändring av den andra raden beroende på det område där du vill använda stilen.  

Genvägar.

Om allt ovan är bra teori för dig, ändå vill du ha ett snabbare sätt att tillämpa den teorin utan att behöva redigera koden, då kan dessa två plugins intressera dig:

Slutsats.

Nu kan du enkelt skapa fantastiska sökknappar i WordPress bara genom att välja ett alternativ i rullgardinsmenyn i WordPress-postredigeraren.

Vi hoppas att denna handledning har hjälpt dig att utforma en stilväljare i din inläggredaktör. Om vi ​​har utelämnat vissa delar eller om du funderar på att få mer information, tveka inte att lämna oss dina kommentarer i avsnittet som är reserverat för dessa sista.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
11 aktier
del10
tweet1
Enregistrer