Gå til hovedindhold

Sådan tilføjes en drop down menu med CSS i dit Visual Editor

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

I denne tutorial lærer du hvordan nemt omdanne tekstlige links til attraktive knapper i WordPress. Ved at følge denne procedurevejledning vil du vide, hvordan du tilføjer en rullemenu til den visuelle editor for WordPress som giver dig mulighed for at anvende tilpassede CSS-stilarter på indholdet af din artikel.

Disse tilpassede CSS-stilarter kan anvendes på tekst i dine indlæg for at dekorere og formatere dem. De bruges stort set til at skabe attraktive og iøjnefaldende knapper til dine artikler. Denne vejledning dækker også oprettelse af en CSS-stilknap.

Hvis du vil have en nem måde at tilføje attraktive knapper på indlæg og sider, så er denne tutorial noget for dig.

Det endelige resultat.

Slutresultatet af denne vejledning bliver at give dig mulighed for at vælge noget tekst i din artikel og derefter anvende en stilart på den via drop-down menuen i artikelditoren.

Når vi er færdige, vil Visual Editor se sådan ud og indeholde et "stilarter" -element i form af en rullemenu:

How-to-Styles-01

Ved hjælp af den nye menu vil det være muligt at anvende en CSS-stil på tekstlinket i din artikel for at skabe en knapeffekt uden brug af billeder. Links kan se sådan ud, selvom udseendet er op til dig:

How-to-Styles-02

Denne tilgang sparer ikke kun din tid, når du opretter en artikel, men giver også alle bidragydere til din blog mulighed for altid at bruge de samme stilarter til at dekorere knapper eller ethvert andet element i artiklerne.

Sikkerhedsinstruktioner.

I denne tutorial redigerer vi følgende filer:

  • fonctions.php
  • style.css

Disse to filer er en del af dit tema, så vi arbejder med de versioner, der er knyttet til det aktuelt aktive tema på din blog. Først og fremmest er det vigtigt at lave en sikkerhedskopi af disse filer hvis noget går galt.

For det andet tilrådes det at oprette et barn tema af dit nuværende tema. Hvis du ikke ved, hvordan man opretter et barn-tema. Brug af et underordnet tema vil sikre, at dit nuværende tema opdateres. Det er også værd at påpege, at hvis du ændrer temaet, ces ændringer vil gå tabt.

Men hvis du arbejder på en blog under udvikling eller en lokal WordPress-installation, behøver du ikke oprette et underordnet tema.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

Tilføjelse af et "Styles" -element til menuen.

Rullemenuen 'stilarter' er faktisk allerede en del af WordPress Visual Editor, men den er som standard deaktiveret. For at aktivere det skal du bare tilføje nogle koder til filen fonctions.php af dit nuværende tema.

For at åbne filen og ændre den, gå til menuen » apparence  »Klik derefter på« Editeur I undermenuen. Hvis du har en engelsk version, gå til Udseende> Editor

How-to-Styles-03

Kontroller først, at det tema, der i øjeblikket bruges af din blog, er valgt i rullemenuen øverst til højre på siden. Jeg er i øjeblikket ved at ændre filen fonctions.php Twenty Twelve tema men for dig kan det være et andet tema.

Klik derefter på filen fonctions.php fra listen over filer til højre for siden for at begynde at redigere den. Kopier og indsæt følgende kode i filen. For nemheds skyld vil jeg anbefale dig at indsætte den i slutningen af ​​filen, så du nemt kan holde styr på, hvad du har føjet til 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 er føjet til filen, skal du klikke på opdateringsknappen for at gemme ændringerne. Hvis alt er i orden, skal du se, at rullemenuen til valg af stil er blevet føjet til WordPress visuelle indlægseditor.

Vi er dog ikke færdige endnu. Hvis du undersøger menupunkterne i denne nye rulleliste, vil du bemærke, at disse er stilarter relateret til Visual Editor for de andre knapper.

Vi vil have Føj vores egne stilarter til listen.

Opret CSS-stilarter på dine knapper.

I denne vejledning opretter vi en knap til vores tekstlinks, men du kan lige så let oprette dekoration og formatering til enhver anden type element.

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

Nu skal vi oprette CSS-stilarter til knapperne. Du kan enten oprette din egen CSS eller bruge en af ​​de mange online knapgenerator-apps. CSS-knapgenerator er et godt valg, så besøg webstedet, og opret hurtigt en knap, og kopier derefter CSS. Gå derefter til "Udseende", derefter til "Editor", og klik på filen style.css i fillisten til højre. På engelsk har du Udseende> Editor-side> style.css

Igen skal du rulle til slutningen af ​​filen og indsætte CSS fra nedenstående knap i den eller bruge 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 */

Opdater filen for at gemme ændringerne.

Føj stilarter til rullemenuen.

Klik nu på filen igen fonctions.php  og indsæt følgende kode i bunden af ​​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

Bemærk disse linjer inde i tabellen:

  • titel - dette er den titel, der vises i rullemenuen
  • vælger - "a" henviser til ankeret, hvilket indikerer at denne stil er til links.
  • klasser - dette er klassens navn på vores CSS-knap

Hvis du brugte din egen CSS, ville klassens navn være det, du gav som navnet på din egen CSS-klasse. I eksemplet ovenfor kaldes CSS-stilknappen linkButton.

Når du har indsat koden i den, skal du klikke på opdateringsknappen for at gemme ændringerne. Så snart filen er gemt, skal du gå til WordPress-indlægseditoren og opdatere vinduet, så ændringerne træder i kraft. Klik derefter på rullemenuen "Styles", og du skal se en post med titlen " LinkButton".

 

How-to-Styles-05

For at anvende CSS-stil og oprette knappen, bare oprette et tekstlink i din artikel, vælg teksten, og vælg derefter den stil, du vil give din knap i menuen. Stilartene vil ikke være synlige i posteditorvinduet. Du skal forhåndsvise artiklen, som skal se sådan ud:

How-to-Styles-06

Når du nu skal indsætte en iøjnefaldende og attraktiv knap i dine indlæg eller sider, skal du bare oprette et tekstlink og derefter vælge dets stil i rullemenuen.

Avancerede indstillinger.

Håber du kan tænke på andre anvendelser til denne funktion. For eksempel kan du tilføje yderligere stilarter til menuen. Det kan være formateringen af ​​udseendet af teksten eller noget andet du kan gøre med CSS.

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

Hvis du vil oprette en ekstra knapstil, der føjes til rullelisten, er det bare nok til at oprette en anden post i tabellen (som er blevet føjet til fonctions.php) og ændre linjerne i titlen og klassen:

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

Tilføj derefter en ny CSS-stil i filen style.css. Hvis du vil oprette stilarter til elementer, der ikke er links, kan du også gøre det. Dette kræver en ændring af den anden linje afhængigt af det område, hvor du vil anvende stilen.  

Genveje.

Hvis alt det ovenstående er god teori for dig, vil du ikke desto mindre have en hurtigere måde at anvende denne teori på uden at skulle redigere koden, så disse to plugins kan interessere dig:

Konklusion.

Nu kan du nemt oprette gode søgeknapper i WordPress bare ved at vælge en mulighed i rullemenuen i WordPress-indlægseditoren.

Vi håber, at denne tutorial har hjulpet dig med at designe en stilvælger i din indlægseditor. Hvis vi har udeladt visse dele, eller hvis du overvejer at give flere detaljer, tøv ikke med at give os dine kommentarer i det afsnit, der er forbeholdt disse sidste.

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen