Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Sitenizde Kodu Kolayca Görüntüleme

Okuyucularımızın sorunlarını çözmelerine yardımcı olmak için oluşturduğumuz farklı WPBeginner blog yazılarında kod parçacıkları görmüş olmalısınız. Ancak, bu kodu görüntülemek kolay değildir.

Bunun nedeni, kodu normal metin gibi eklemeye çalışırsanız, WordPress’in kodu doğru şekilde görüntülemeyecek olmasıdır. WordPress, bir yazıyı her kaydettiğinizde içeriğinizi birkaç temizleme filtresinden geçirir. Bu filtreler, birisinin web sitenizi hacklemek için bir yazı editörü aracılığıyla kod eklemediğinden emin olmak için vardır.

Bu makalede, WordPress sitenizde kodu kolayca görüntülemenin uygun yollarını göstereceğiz. Size farklı yöntemler göstereceğiz ve ihtiyaçlarınıza en uygun olanı seçebilirsiniz.

How to easily display code in WordPress posts

WordPress Web Sitesinde Neden Kod Görüntülenir?

Teknik konularda blog yazıları yazıyorsanız veya ürünleriniz için belgeler oluşturuyorsanız, kod parçacıklarını göstermek gerçekten yararlıdır. Kullanıcılarınız basitçe kod parçasını kopyalayabilir ve web sitelerine ekleyebilir.

Ancak, bir WordPress web sitesinde kod görüntülemek o kadar kolay değildir.

WordPress parçacıkları işlevsel kod olarak yorumlayacak ve metin olarak görüntülemek yerine web sitenize uygulamaya çalışacaktır. Ayrıca kodu doğru bir şekilde göstermez, bu da kullanıcılar bunları web sitelerine girdiklerinde hatalara yol açar.

Ayrıca, WordPress güvenlik önlemleri olarak birden fazla filtre kullanır. Bilgisayar korsanlarının içerik editörüne kötü amaçlı kod enjekte etmesini ve web sitenizi hacklemesini önlemek için içeriği filtreler.

Bununla birlikte, WordPress’te kod gösterebileceğiniz farklı yollar vardır. Tercih ettiğiniz bölüme geçmek için aşağıdaki bağlantılara tıklayabilirsiniz:

Yöntem 1. WordPress’te Varsayılan Düzenleyiciyi Kullanarak Kodu Görüntüleme

Bu yöntem yeni başlayanlar ve kodu çok sık görüntülemesi gerekmeyen kullanıcılar için önerilir.

Kodu görüntülemek istediğiniz blog gönderisini veya sayfayı düzenlemeniz yeterlidir. WordPress içerik düzenleyici ekranında, yazınıza yeni bir Kod bloğu ekleyin.

Add code block to your WordPress posts

Artık kod parçacığını bloğun metin alanına girebilirsiniz.

Kod bloğu, kodunuzun bir önizlemesini gösterecektir.

Add code to your blog post

Bundan sonra, blog gönderinizi kaydedebilir ve kod bloğunu çalışırken görmek için önizleyebilirsiniz.

Kodunuzun görünümünden memnun kaldığınızda, devam edin ve blog gönderinizi yayınlayın.

PHP code displayed in WordPress

WordPress temanıza bağlı olarak, kod bloğu web sitenizde farklı görünebilir.

Yöntem 2. WordPress’te Bir Eklenti Kullanarak Kodu Görüntüleme

Bu yöntemde, blog yazılarınızda kod görüntülemek için bir WordPress eklentisi kullanacağız. Bu yöntem, yazılarında sık sık kod görüntüleyen kullanıcılar için önerilir.

Varsayılan kod bloğuna göre size aşağıdaki avantajları sağlar:

  • Herhangi bir programlama dilindeki herhangi bir kodu kolayca görüntülemenizi sağlar.
  • Kodu sözdizimi vurgulama ve satır numaraları ile görüntüler.
  • Kullanıcılarınız kodu kolayca inceleyebilir ve kopyalayabilir.

Öncelikle SyntaxHighlighter Evolved eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından devam edebilir ve kodu görüntülemek istediğiniz blog gönderisini düzenleyebilirsiniz. Yazı düzenleme ekranında, yazınıza ‘SyntaxHighlighter Code’ bloğunu ekleyin.

SyntaxHighlighter code block

Şimdi gönderi düzenleyicide kodunuzu girebileceğiniz yeni bir kod bloğu göreceksiniz.

Kodu ekledikten sonra, sağ sütundan blok ayarlarını seçmeniz gerekir.

Change Syntax Highlighter code settings

İlk olarak, kodunuz için PHP, CSS, Java vb. gibi bir dil seçmeniz gerekir. Bundan sonra, satır numaralarını kapatabilir, ilk satır numarasını verebilir, istediğiniz satırı vurgulayabilir ve bağlantıları tıklanabilir hale getirme özelliğini kapatabilirsiniz.

İşiniz bittiğinde gönderinizi kaydedin ve çalışırken görmek için önizleme düğmesine tıklayın.

Code displayed with syntax highlighting

Eklenti bir dizi renk şeması ve tema ile birlikte gelir.

Renk temasını değiştirmek için Ayarlar ” SyntaxHighlighter sayfasını ziyaret etmeniz gerekir.

SyntaxHighlighter settings

Ayarlar sayfasından bir renk teması seçebilir ve SyntaxHighlighter ayarlarını değiştirebilirsiniz.

Sayfanın altında kod bloğunun önizlemesini görmek için ayarlarınızı kaydedebilirsiniz.

Code block preview

SyntaxHighlighter’ı Klasik Düzenleyici ile Kullanma

Eğer hala eski klasik WordPress editörünü kullanıyorsanız, WordPress blog yazılarınıza kod eklemek için SyntaxHighlighter eklentisini şu şekilde kullanabilirsiniz.

Kodunuzu dil adıyla birlikte köşeli parantezlerin etrafına sarmanız yeterlidir. Örneğin, PHP kodu ekleyecekseniz, şu şekilde ekleyeceksiniz:

<?php
private function get_time_tags() {
        $time = get_the_time('d M, Y');
        return $time;
    }
?>

Benzer şekilde, bir HTML kodu eklemek istiyorsanız, bunu HTML kısa kodunun etrafına şu şekilde sararsınız:

<a href="example.com">A sample link</a>

Yöntem 3. WordPress’te Kodu Manuel Olarak Görüntüleme (Eklenti veya Blok Yok)

Bu yöntem ileri düzey kullanıcılar içindir çünkü daha fazla çalışma gerektirir ve her zaman amaçlandığı gibi çalışmaz.

Hala eski Klasik editörü kullanan ve bir eklenti kullanmadan kod görüntülemek isteyen kullanıcılar için uygundur.

Öncelikle, kodunuzu çevrimiçi bir HTML varlıkları kodlayıcı aracından geçirmeniz gerekir. Bu araç kod işaretlemenizi HTML varlıklarına dönüştürerek kodu eklemenize ve WordPress temizleme filtrelerini atlamanıza olanak tanıyacaktır.

Şimdi kodunuzu kopyalayıp metin düzenleyicisine yapıştırın ve <pre> ve <code> etiketlerinin etrafına sarın.

Adding code manually in classic editor

Kodunuz şu şekilde görünecektir:

<pre><code>
&lt;p&gt;&lt;a href=&quot;/home.html&quot;&gt;Bu örnek bir bağlantıdır&lt;/a&gt;&lt;/p&gt;
</pre></code>

Artık gönderinizi kaydedebilir ve kodu çalışırken önizleyebilirsiniz.

Tarayıcınız HTML varlıklarını dönüştürecek ve kullanıcılar doğru kodu görebilecek ve kopyalayabilecektir.

Manually displaying code in WordPress

Umarız bu makale WordPress sitenizde kodları nasıl kolayca görüntüleyebileceğinizi öğrenmenize yardımcı olmuştur. WordPress yazılarında ve sayfalarında PHP’ye nasıl izin vereceğinize ilişkin kılavuzumuza ve en iyi WordPress geliştirme araçları uzman seçimimize de göz atmak isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

33 yorumBir Cevap Bırakın

  1. Dennis Muthomi

    I think the plugin is great for its job, but…

    one feature I’d love to see added is a copy button.

    Currently, users have to manually highlight and copy the full code block, which can be tedious, especially for longer snippets.
    A single-click copy option would tremendously improve the user experience.
    That way, readers could easily grab the code without accidentally missing any part of it when they highlight the code.

    • WPBeginner Support

      Thank you for sharing that recommendation :)

      Yönetici

  2. Jiří Vaněk

    Is there a possibility to have a copy code button in the plugin so that the user does not have to copy the code to the clipboard manually?

    • WPBeginner Support

      Not at the moment but we will keep an eye out for a method we would recommend :)

      Yönetici

      • Jiří Vaněk

        Thank you for answer. This is a great shame, because it makes a lot of work easier. Sometimes it happens that even line numbers are copied into the code using the manual method. Elementor has a widget for the code that the copy button has and it’s great. I will follow the update of the article if necessary.

  3. Ms Gray

    Hello,

    Can code be put on pages added by third party plugin such as Woocommerce?

    • WPBeginner Support

      Yes, you would be able to place code on those pages.

      Yönetici

  4. Ravish

    Hi, first of all, Thanks for this blog.

    I want to add codes for any problem in different languages (e.g. Python and C++). How can we do that?

    • WPBeginner Support

      This plugin should still work for those languages as well

      Yönetici

  5. Nimesh

    This is great.
    If it wasn’t for this, I would’ve used a separate plugin for input code snippets.
    I’m still using WordPress’s classic editor and will add the code snippets to my posts as mentioned in this.
    Thank You for this amazing share!

    • WPBeginner Support

      Glad our guide was able to help :)

      Yönetici

  6. Induwara

    Thanks,
    This article is very useful. I installed the plugin and it works well. There’s a problem with my theme that when I put a code from the block editor the theme displays it with the background color so it’s impossible to see the code. I’m a big fan of WpBegginer!

    • WPBeginner Support

      Glad our guide was helpful, you should be able to reach out to your theme for assistance with that issue.

      Yönetici

  7. Manju

    Can you suggest a way to display the code from a Github repo in Wordpress posts?

    • WPBeginner Support

      You could place the code as we have in this article and note beneath it where it came from Github. There may be plugin options as well for embedding the code directly

      Yönetici

  8. Kunal Mandalia

    Thanks for tip about “code” tags – worked like a charm.

    • WPBeginner Support

      You’re welcome :)

      Yönetici

  9. Mahesh

    Good one.. Thanks for the tip.

    • WPBeginner Support

      Thank you and you’re welcome :)

      Yönetici

  10. perveen

    we need coding at wordpress i thought wedont need any coding at wordpress.

    • WPBeginner Support

      It is not required but for sites that wish to show code to their users, these are some methods they can use.

      Yönetici

  11. Adamu Malte

    Thank you @Syed for your great tutorial.

  12. manasa

    Nice blog with excellent information. Thank you, keep sharing.

  13. Anh

    Great, Just wonder how you can post the code inside

     

    and still make the code look like text.

    Like how you can post this code

    .entry-title {
    font-family:”Open Sans”, arial, sans-serif;
    font-size:16px;
    color:#272727;
    }
    

    to your post without changing how it shows on the post.

  14. Rushikesh Thawale

    Thank You for this post. :)

  15. Christian

    There’s a typo on the word ‘Syntax’…no wonder I was getting no results when I copied paste the text on Wordpress plugin search! ;-)

    Synatx Highlighter Evolved plugin

  16. Ahmed

    Thanks Syed….Great tutorial. I want to ask you that how we can change the font size of code?

  17. Dave Mackey

    I think there is a problem with Syntax Highlighter Evolved in latest versions of WordPress. I, and others, are having it incorrectly display html entities. See support forums for more.

  18. Md Abul Bashar

    How to show code without plugin only coding?

  19. John D

    Personally, I use WP-GeSHi-Highlight, which uses the standard GeSHi codes. I think I used a predecessor of the plugin featured here, but I had difficulty finding the language codes.

  20. Ajay

    Of late, I’ve found it easier to use GISTs to display code and then just embed the Gist in the post

    • Mikhail S.

      @AJAY, please tell me more about using GIST to display code samples.

      Thank you!

    • Thomas A. Reinert

      I do absolutely agree. They´re pretty well formatted and syntax-highlighted, they´re forkable and they´re versionable too. So WP GIST is the way to go for me at least..

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.