WordPress Görsel Düzenleyicisine Özel Stiller Nasıl Eklenir

50 yorumBir Cevap Bırakın

1. Syed Balkhi says

   Tem 4, 2024 2:24 pm'de

   Hey WPBeginner readers,
   Did you know you can win exciting prizes by commenting on WPBeginner?
   Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
   You can get more details about the contest from here.
   Start sharing your thoughts below to stand a chance to win!

2. Toufic Ahemmed says

   Nis 19, 2019 12:04 am'de

   This guys are awesome. they help me most of the time. thank you very very much.

   Yanıtla

   • WPBeginner Support says

     Nis 19, 2019 10:22 am'de

     Glad we could help

     Yanıtla

     Yönetici

3. Aslan French says

   Kas 24, 2018 6:37 pm'de

   This article should be updated with Gutenberg in mind, as this kind of functionality has been added to the Rich Text API recently.

   Yanıtla

   • WPBeginner Support says

     Kas 25, 2018 2:31 pm'de

     Hi Aslan,

     Thanks for the suggestion. We will definitely look into older articles once Gutenberg is out.

     Yanıtla

     Yönetici

4. Mehrdad says

   Oca 23, 2017 2:51 pm'de

   Thanks a lot.
   This article really helped me.

   Yanıtla

5. sabbi says

   Ara 3, 2016 4:02 pm'de

   This adds classes to a p-tag doesnt it?
   Is there a way to even create own tags?
   Or another thing:will a chosen custom Format overwrite a previously chosen h-tag with a p? Would be necessary to prevent a client from getting in trouble when hes clicking around in the default AND custom styles.

   Yanıtla

6. Britany says

   Kas 23, 2016 2:29 am'de

   Unfortunately this didn’t help me at all. Is there an article that explains what each of the fields you have to fill in mean?

   All I need is a way to apply the same formatting to quotes on my podcast show notes pages. Each quote is the the same font (that I have set-up as a headline style), bolded, and centered.

   I get tired of manually applying each part of the format to every quote and just a way to click one button and be done.

   Yanıtla

7. Syams says

   Kas 22, 2016 10:36 am'de

   Please, tell me how to add a new font to WP visual editor.

   Yanıtla

8. Moya Nicholson says

   Kas 7, 2016 11:43 am'de

   Thank you. Really helpful.

   Yanıtla

9. stanley says

   Eyl 30, 2016 3:16 pm'de

   I need to modify my theme WP

   hell me please

   Yanıtla

10. Sandy Connolly says

    Ağu 4, 2016 3:18 pm'de

    THANK YOU FOR THIS!!! OMG!!!! How helpful upon handing a site over to a client who wants to be able to add his/her own content based on our design!

    Yanıtla

11. Marcin says

    Nis 21, 2016 2:39 pm'de

    Hi, I develop WordPresses every day and do everything with WP but this piece of code is one of the most useful I’ve seen for long time… It is exactly what default WYSIWYG is (now I can say: was) missing! It allows to do some stunnig things inside content field. Thank You for sharing!

    Yanıtla

12. Foxglove says

    Nis 20, 2016 11:23 am'de

    I have been using this plugin for a while now, but it is no longer available from wordpress.org — apparently no longer updated or supported. Is anyone aware of any alternatives other than the manual method you describe?

    Yanıtla

    • Lisa McMahon says

      Tem 25, 2016 11:00 am'de

      Here’s an updated/forked version of the original plugin mentioned in the article: TinyMCE Custom Styles

      Yanıtla

      • WPBeginner Support says

        Eyl 7, 2016 11:01 am'de

        Hey Lisa, thanks for pointing this out. We have updated the article with the updated/forked version.

        Yanıtla

        Yönetici

13. Shubha Das says

    Mar 16, 2016 5:27 pm'de

    I want to add p instead of span. But when I change block name span to p, it doesn’t work.

    ‘title’ => ‘Note’,
    ‘block’ => ‘p’,
    ‘classes’ => ‘note’,
    ‘wrapper’ => true,

    Yanıtla

14. MacKenzie says

    Kas 29, 2015 4:19 pm'de

    I found this really helpful and I feel like I almost have it but it isn’t quite working yet. My text gets properly tagged with the span and class tags in the editor when selected – but none of the styles I put in the style sheet are being applied to the published note.

    Yanıtla

15. Frank says

    Eyl 22, 2015 10:50 am'de

    I always become nervous and feel like vomiting if some customer needs wordpress tweaks. Coll, this style pulldown BUT, as someone said before, completely useless if styles cannot be withdrawn afterwards and only add up, add up, add up…

    I’m used to these half baked sulotions in wordpress – normally there’s also a complementary half-baked solutions to half repair the first one. But here?

    Now HOW would you suggest TO REMOVE CUSTOM STYLES added via the styles pulldown. Code view is in no way acceptable for my client?

    I’d be unbelievably lucky if someone has found a way to do that and would share this knowledge (and for putting the catastrophe called wordpress out of my reach for( i hope) a very long time).

    Thanks a lot in advance!

    Frank

    Yanıtla

    • Chris says

      Kas 11, 2015 5:27 am'de

      Click on the style in the pulldown again. Done.

      Yanıtla

16. Shafi ken says

    Eyl 9, 2015 3:09 am'de

    Thanks for the helpful tutorial. Thanks

    Yanıtla

17. K Shazzad says

    Eyl 7, 2015 1:39 pm'de

    Whole tutorial worked flawlessly for me. Thanks a bunch

    Yanıtla

18. Stef says

    Ağu 18, 2015 4:44 am'de

    I tried out this plugin but realized, that when you change a custom style, It won’t update those you inserted already. You have to go back and reinsert them, because the feature adds the style inline and not via stylesheet

    Yanıtla

19. Phil says

    Haz 24, 2015 8:45 am'de

    Thanks for the helpful tutorial. Is there any performance penalty in using the plugin rather than hand-coding it? Thanks,

    Yanıtla

    • WPBeginner Support says

      Haz 24, 2015 12:22 pm'de

      No, but for reusing elements this method is quite handy. It is also useful, if you are building a site for a client and want them to be able to add things from the visual editor.

      Yanıtla

      Yönetici

20. Sei says

    May 27, 2015 6:19 am'de

    Thanks for the tutorial!
    Is there a way to add two markups at once? Like, getting something like text

    Yanıtla

    • Sei says

      May 27, 2015 6:21 am'de

      Okay, your comments converts HTML. I mean, I’d like to get both ‘h1’ and ‘span’ markups around my text by clicking on only one style.

      Yanıtla

21. Lily says

    May 3, 2015 7:17 am'de

    I’ve managed to do the custom classes and the elements do show with the right classes in the text editor and on the page, but the class isn’t applied in the visual editor which makes it very unclear whether it’s worked or not for the user. Is there any way to fix that?

    Yanıtla

22. Bonnie Dasher-Andersen says

    Nis 2, 2015 7:49 am'de

    I’ve added two custom styles. When I go to edit a page, I have two Format menus, each one with the same entries (the two styles that I created). When I try to apply these styles, nothing happens. I can see the tag in the Text view, but when I view the page – the style hasn’t been applied.

    Any suggestions? Need to figure this out for a client who will be updated this WP site and is not very savvy.

    Yanıtla

    • Marcello says

      Ağu 10, 2015 10:39 am'de

      I had the same problem, where the tags weren’t applied to code. Fixed it by setting ‘wrapper’ to ‘false’. I don’t know the technical reasons, just tested and it worked. Hope it helps!

      Yanıtla

      • hugotom says

        Tem 6, 2016 12:00 pm'de

        I had the same problem that the style sheet is not recorded.
        Solution
        If you already have this recording style sheets in the functions.php file should add right there stylesheet custom-editor-style.css

        Example:

        function styles_theme(){
        wp_enqueue_style(‘bootstrap_css’, get_template_directory_uri() . ‘/sources/bootstrap/bootstrap.min.css’);
        wp_enqueue_style(‘main_css’, get_template_directory_uri() . ‘/style.css’);
        wp_enqueue_style(‘theme_css’, get_template_directory_uri() . ‘/custom/css/theme.css’);
        wp_enqueue_style(‘editor_css’, get_template_directory_uri() . ‘/custom-editor-style.css’); // HERE
        };

        Yanıtla

23. Raphael Landau says

    Mar 10, 2015 5:41 am'de

    I’ve used this and also had the issue where the style/class is implemented to the entire Paragraph. This is because you set the style format as “block”. (‘block’ => ‘span’,).

    Quickly visiting the official WordPress codex, discovers much more options for style formatting.

    http://codex.wordpress.org/TinyMCE_Custom_Styles

    Since span is an inline style be default, you should replace ‘block’ with ‘inline’, and viola! You’re styling should work as expected.

    so in short:

    array(
    ‘title’ => ‘Your Title’,
    ‘inline’ => ‘span’,
    ‘classes’ => ‘your-class’,
    ‘wrapper’ => true,
    ),

    Yanıtla

24. nemaha says

    Şub 21, 2015 7:09 am'de

    Hi,
    great tutorial, thanks for that! I, too, have the problem, that style (a span) is applied to the whole paragraph. What I intend to do: Write a headline and format it as heading 1, then mark only one specific word within that headline to add a custom style. Any update on how to fix this? Thanks!

    Yanıtla

25. bekee says

    Oca 28, 2015 3:26 pm'de

    i, too, have the problem where it applies the style to the whole paragraph, not just the selected element. any update on this? thanks!

    Yanıtla

26. Debbie says

    Ara 17, 2014 3:33 pm'de

    Having the same issue. Highlight one word, but takes effect on entire paragraph.

    Yanıtla

27. James says

    Kas 22, 2014 9:16 pm'de

    I find a couple of problems. It does seem to work, but not as expected. Will not do for someone who does not know code.

    1. Highlight a single word in a paragraph to add a but the is added to the entire paragraph, not just the highlighted word.
    2. No way to remove the css without editing code. My client does not do code! Even tried to make a class of .nothing but the new class is only added to any others, does not replace existing class.

    Yanıtla

28. WPBeginner Staff says

    Eki 23, 2014 11:16 pm'de

    See our guide on how to fix common image issues in WordPress.

    Yanıtla

29. Sheikh Zuhaib Siddiqui says

    Eki 22, 2014 7:57 pm'de

    Hey I have an error in add media. When I try to upload any media, there is only continue loading and not showing up any media and can upload media……………Let me know what the mistake here???

    But this is working fine …………just error in media uploader. please provide me this solution.

    Yanıtla

30. Marlice says

    Eki 7, 2014 4:45 am'de

    Hi. Thank you for this great tutorial. I have a problem with content that is already in the editor. If I mark a word or a part of text and choose a style (for example “blue button” – from your code) it wraps not only the marked word or part of text. Instead it marks the whole content and put a span with the class .blue button on it. I tried it several times with other pages and posts – always the same: if the content was already there and I marked it, then the whole content get the span class. This does not happen if I wrap a new edited text in the page/post – than everything works fine. Does anybody has this phenomen too?
    Thank you,
    Ute

    Yanıtla

31. John-Henry Ross says

    Eyl 2, 2014 3:51 am'de

    Hi. I tried this method and it works like a charm, exactly what I was looking for, thank you. I just want to find out if there is a way to add styles to a subfolder instead of just adding it under a format button. E.g. add a headings subfolder with all heading stylings, add div submenu with div stylings, etc.

    Yanıtla

32. dave says

    Ağu 26, 2014 4:24 pm'de

    Thanks!
    It’s great to show 2 methods, too… my clients cower in fear at handling any code.

    I will sometimes use custom fields to “force” safe additional styles, but the TinyMCE can be handled by some people, so I’ll kee that in mind.

    Ciao, Dave

    Yanıtla

33. WPBeginner Staff says

    Ağu 1, 2014 5:49 pm'de

    you do not need to add the dot in

    classes’ => ‘.alert-blue’,

    It should be

    classes’ => ‘alert-blue’,

    Yanıtla

    • Jeff Gaudette says

      Ağu 5, 2014 3:26 pm'de

      Sadly, this didn’t work. I removed the period, but still nothing applies in the editor. I know you’re not a help desk, but here’s a screenshot if you’re interested: http://screencast.com/t/JI0zMvcH

      Thanks for all the great stuff you put out!

      Yanıtla

      • WPBeginner Staff says

        Ağu 5, 2014 8:11 pm'de

        Can you paste the code you added in your functions.php file. Also paste the CSS you are using for these buttons.

        Yanıtla

        • Jeff Gaudette says

          Ağu 5, 2014 8:18 pm'de

          Sure. Functions:

          /*
          * 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’ => ‘Alert’,
          ‘block’ => ‘span’,
          ‘classes’ => ‘entry p.alert-blue’,
          ‘wrapper’ => true,

          ),
          array(
          ‘title’ => ‘Alert Blue’,
          ‘block’ => ‘p’,
          ‘classes’ => ‘alert-blue’,
          ‘wrapper’ => true,
          ),
          array(
          ‘title’ => ‘Blue Button’,
          ‘block’ => ‘span’,
          ‘classes’ => ‘alert-blue-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’ );

          CSS

          .alert-blue{
          background: none repeat scroll 0 0 #E7F4FD;
          border: 1px solid #C5D7E3;
          color: #3A5971;
          font-size: 18px;
          line-height: 24px;
          text-align: center;
          margin: 0 0 15px !important;
          padding: 15px 25px;
          width: auto;
          }

34. WPBeginner Staff says

    Ağu 1, 2014 5:46 pm'de

    Did you add the CSS in your stylesheet?

    Make sure that the style rules you add in your CSS match the classes you add in the Callback function to filter the MCE settings.

    Yanıtla

35. Kemi O says

    Tem 31, 2014 5:46 pm'de

    TinyMCE Advanced Professsional Formats and Styles is only supported up to WP version 3.6.1

    Yanıtla

36. Keely Worth says

    Tem 30, 2014 8:56 am'de

    I avoid the Visual Editor like the plague! Only use it if I have to switch to it to use a theme’s built-in shortcode button. Otherwise – never use it.

    Yanıtla

37. Blair2004 says

    Tem 29, 2014 11:01 am'de

    I have tried first method, new style are available but, while i’m selecting one, nothing happens…

    Yanıtla

38. Jeff Gaudette says

    Tem 29, 2014 10:51 am'de

    I am trying to do this with a block and having no luck. Code is:

    array(
    ‘title’ => ‘Alert Blue’,
    ‘block’ => ‘p’,
    ‘classes’ => ‘.alert-blue’,
    ‘wrapper’ => true,
    ),

    It works when I use span, but this necessitates a span class, which I can’t use.

    When i use the above code, nothing happens in the wp editor. I select the text, click the Alert Blue formatting option and nothing happens: http://screencast.com/t/dijujZ2ZdqBy

    Any advice?

    Yanıtla