Aangepaste stijlen toevoegen aan WordPress Visual Editor

5 min


113

Laat, E.W.M. de (Erwin)

all rights reserved

DeLaatbusiness

Aangepaste stijlen toevoegen aan WordPress Visual Editor

Aangepaste stijlen toevoegen aan WordPress Visual Editor

Wil je aangepaste stijlen toevoegen in de visuele editor van WordPress? Door aangepaste stijlen toe te voegen, kunt u snel de opmaak toepassen zonder over te schakelen naar de teksteditor. In dit artikel laten we u zien hoe u aangepaste stijlen toevoegt aan de visuele editor van WordPress.

Aangepaste stijlen toevoegen in WordPress visuele editor

Opmerking: deze tutorial vereist basiskennis van CSS .

Waarom en wanneer u aangepaste stijlen nodig hebt voor WordPress Visual Editor

WordPress visuele editor wordt standaard geleverd met enkele standaardopmaak- en stijlopties . Soms heb je echter zelf aangepaste stijlen nodig om CSS-knoppen , inhoudsblokken , taglines, enz. Toe te voegen .

U kunt altijd overschakelen van visuele naar teksteditor en aangepaste HTML en CSS toevoegen. Maar als u regelmatig een aantal stijlen gebruikt, is het het beste om ze toe te voegen aan de visuele editor, zodat u ze gemakkelijk opnieuw kunt gebruiken.

Dit bespaart u tijd die u besteedt aan het heen en weer schakelen tussen tekst en visuele editor. Hiermee kunt u ook consequent dezelfde stijlen gebruiken op uw website.

Het belangrijkste is dat je stijlen eenvoudig kunt aanpassen of bijwerken zonder dat je posts op je website hoeft te bewerken.

Dat gezegd hebbende, laten we eens kijken naar hoe aangepaste stijlen kunnen worden toegevoegd in WordPress visuele editor.

Methode 1: aangepaste stijlen toevoegen in Visual Editor met behulp van plug-in

Het eerste wat u hoeft te doen is de TinyMCE Custom Styles- plug-in installeren en activeren . Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie .

Na activering moet je de pagina Instellingen »TinyMCE aangepaste stijlen bezoeken om de plug-in-instellingen te configureren.

TinyMCE Custom Styles-instellingen

Met de plug-in kunt u de locatie van stylesheet-bestanden kiezen. Het kan uw thema of gebruiken kind thema stylesheets ‘s, of u kunt kiezen voor een aangepaste locatie van je eigen.

Hierna moet u klikken op de knop ‘Alle instellingen opslaan’ om uw wijzigingen op te slaan.

Nu kunt u uw aangepaste stijlen toevoegen. U moet een beetje naar de stijlsectie scrollen en op de knop Nieuwe stijl toevoegen klikken.

Eerst moet je een titel voor de stijl invoeren. Deze titel wordt weergegeven in het vervolgkeuzemenu. Vervolgens moet je kiezen of het een inline-, blok- of selectorelement is.

Voeg daarna een CSS-klasse toe en voeg vervolgens uw CSS-regels toe, zoals weergegeven in de onderstaande schermafbeelding.

Een nieuwe aangepaste stijl toevoegen

Zodra u een CSS-stijl hebt toegevoegd, klikt u eenvoudig op de knop ‘Alle instellingen opslaan’ om uw wijzigingen op te slaan.

U kunt nu een bestaande post bewerken of een nieuwe maken. U ziet een vervolgkeuzemenu Opmaak in de tweede rij van WordPress visuele editor.

Aangepast stijlmenu in TinyMCE

Selecteer eenvoudig wat tekst in de editor en selecteer vervolgens uw aangepaste stijl in het vervolgkeuzemenu Formaten om het toe te passen.

U kunt nu een voorbeeld van uw bericht bekijken om te zien of uw aangepaste stijlen correct zijn toegepast.

Methode 2: handmatig aangepaste stijlen toevoegen aan WordPress Visual Editor

Voor deze methode moet u handmatig code toevoegen aan uw WordPress-bestanden. Als dit de eerste keer is dat u code toevoegt aan WordPress, bekijk dan onze handleiding over het toevoegen van codefragmenten van internet aan WordPress .

Stap 1: voeg een vervolgkeuzemenu voor aangepaste stijlen toe in WordPress Visual Editor

Eerst zullen we een vervolgkeuzemenu met indelingen toevoegen in de visuele editor van WordPress. Met dit vervolgkeuzemenu kunnen we onze aangepaste stijlen selecteren en toepassen.

U moet de volgende code toevoegen aan het functie.php- bestand van uw thema of een sitespecifieke plug-in .

1

2

3

4

5

function wpb_mce_buttons_2($buttons) {

    array_unshift($buttons, ‘styleselect’);

    return $buttons;

}

add_filter(‘mce_buttons_2’, ‘wpb_mce_buttons_2’);

Stap 2: Voeg keuzemogelijkheden toe aan vervolgkeuzemenu

Nu moet u de opties toevoegen aan het vervolgkeuzemenu dat u zojuist hebt gemaakt. U kunt deze opties vervolgens selecteren en toepassen in het vervolgkeuzemenu Formaten.

In het belang van deze zelfstudie voegen we drie aangepaste stijlen toe om inhoudsblok en knoppen te maken.

U moet de volgende code toevoegen aan het functie.php- bestand van uw thema of een sitespecifieke plug-in .

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

/*

* 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’ );

U kunt nu een nieuw bericht toevoegen in WordPress en klikken op het vervolgkeuzemenu Formaten in de Visuele editor. U zult merken dat uw aangepaste stijlen nu zichtbaar zijn onder indelingen.

Het selecteren van deze maakt echter op dit moment geen enkel verschil in de berichteditor.

Stap 3: CSS-stijlen toevoegen

Nu is de laatste stap het toevoegen van CSS-stijlregels voor uw aangepaste stijlen.

U moet deze CSS toevoegen aan de thema’s style.css en editor-style.css van uw thema of onderliggende thema.

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

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

}

Aangepaste stijlen in de WordPress-berichteditor

Het bewerkingsblad voor de editor bepaalt de weergave van uw inhoud in de visuele editor. Raadpleeg de documentatie van uw thema om de locatie van dit bestand te achterhalen.

Als uw thema geen editor stylesheet-bestand heeft, kunt u er altijd een maken. Maak eenvoudig een nieuw CSS-bestand en noem het custom-editor-style.css.

U moet dit bestand uploaden naar de hoofdmap van uw thema en vervolgens deze code toevoegen aan het function.php-bestand van uw thema.

1

2

3

4

function my_theme_add_editor_styles() {

    add_editor_style( ‘custom-editor-style.css’ );

}

add_action( ‘init’, ‘my_theme_add_editor_styles’ );

Dat is alles. U hebt met succes uw aangepaste stijlen toegevoegd aan de visuele editor van WordPress. Voel je vrij om met de code te spelen door je eigen elementen en stijlen toe te voegen.

We hopen dat dit artikel je heeft geholpen om te leren hoe je aangepaste stijlen kunt toevoegen aan de visuele editor van WordPress. U kunt ook onze gids raadplegen over het toevoegen van aangepaste stijlen aan WordPress-widgets .


Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format