Lägga till en rullgardinsmeny med CSS i Visual Editor

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:

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:

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.

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

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.

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:

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".

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:

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.

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:

• TinyMCE och TinyMCE Advanced Professional Format och Styles
• Easy Anpassade Styles för Wordpress
•  

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.