İster uzun, derinlemesine bir yazı yazıyor ister ayrıntılı bir SSS bölümü oluşturuyor olun, okuyucularınızı bunaltmadan çok fazla bilgi sunmak zor olabilir. Kimse devasa bir metin duvarına bakmak istemez.
Bu durumda, bizim çözümümüz metni bir geçiş efektiyle gösterip gizlemektir. Bu yaklaşım yerden tasarruf sağlar, içeriğinizi daha taranabilir hale getirir ve okuyuculara neyi görmek istedikleri konusunda kontrol imkanı verir.
İşte uzun biçimli içeriğiniz için metni göstermek ve gizlemek üzere WordPress’te geçiş efektini kullanmanın 3 kolay yolu.
WordPress Yazılarında Neden Metin Gösterilir ve Gizlenir?
Birçok web sitesi varsayılan olarak metni gizler, genellikle bir teaser gösterir ve ardından bir ‘Read More’ veya ‘See More’ bağlantısı ekler. Ziyaretçiler bu bağlantıya tıklayarak daha fazla bilgi alabilirler.
Bu, bir sayfaya çok sayıda bilgi eklemeniz gerekiyorsa ancak metin duvarının ziyaretçileri bunaltacağından endişe ediyorsanız kullanışlıdır.
Çoğu ziyaretçi yalnızca tek bir sorunun yanıtını isteyeceği için SSS’ler harika bir örnektir.
Tüm yanıtları eksiksiz olarak gösterirseniz, ziyaretçiler ihtiyaç duydukları bilgileri bulmakta zorlanabilir.
Geçiş efektiyle metni gizleyerek ziyaretçiler çok sayıda gönderiyi, özelliği, faydayı veya diğer bilgileri tarayabilir ve ardından öğrenmek istedikleri öğeyi seçebilirler.
Bununla birlikte, WordPress’te geçiş efektiyle metni nasıl gösterip gizleyebileceğinizi görelim. Kullanmak istediğiniz yönteme atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:
Yöntem 1: WordPress’te Kısa Kod Kullanarak Metin Gösterme ve Gizleme (Hızlı ve Kolay)
Herhangi bir sayfaya veya yazıya ‘Read More’ bağlantısı eklemenin en hızlı ve kolay yolu Read More Without Refresh kullanmaktır. Bu ücretsiz eklenti, ‘Read More’ bağlantısını özelleştirmenize ve ardından bir kısa kod kullanarak web sitenizin herhangi bir yerine eklemenize olanak tanır.
Yapmanız gereken ilk şey, Read More Without Refresh eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuza bakın.
Etkinleştirmenin ardından, eklentinin ayarlarını yapılandırmak için ‘RMWP Ayarları’na tıklayın.
Başlangıç olarak, iki metin alanına yazarak ‘Daha Fazla Oku / Daha Az Oku’ bağlantılarında kullanılan metni değiştirebilirsiniz.
Örneğin, bir SSS oluşturuyorsanız, bunun yerine ‘Yanıtı Göster / Yanıtı Gizle’ gibi bir şey kullanmak isteyebilirsiniz.
Bu ekranda metin rengini, arka plan rengini ve daha fazlasını da değiştirebilirsiniz. Bu, WordPress temanıza mükemmel şekilde uyan bağlantılar oluşturmanıza yardımcı olabilir.
Ayrıca yazı tipi ağırlığını değiştirebilir, kenarlık ekleyebilir ve dolguyu değiştirebilirsiniz.
Bu sayfada işiniz bittiğinde, herhangi bir değişiklik yapmamış olsanız bile ‘Değişiklikleri Kaydet’ düğmesine tıkladığınızdan emin olun. Bu önemlidir çünkü bu düğmeye tıklamazsanız, eklenti beklendiği gibi çalışmayacaktır.
Bunu yaptıktan sonra, herhangi bir sayfaya veya gönderiye geçiş efekti ekleyebilirsiniz. Gizlemek istediğiniz metni bulmanız ve ardından kısa koda sarmanız gerekir.
Başlamak için, herhangi bir sayfa veya yazı için Gutenberg blok düzenleyicisini açın. Ardından, gizlemek istediğiniz metnin önüne bir blok eklemek için ‘+ Blok Ekle’ simgesine tıklayın.
Ardından, ‘Shortcode’ yazmaya başlayın ve karşınıza çıktığında doğru bloğu seçin.
Kısa kod kutusuna aşağıdaki kısa kodu ekleyin: [daha fazla oku]
Bunu yaptıktan sonra, gizlemek istediğiniz metinden sonra bir Kısa Kod bloğu eklemeniz gerekir.
Metnin sonunda, ‘+’ simgesine tıklayın ve yukarıda açıklanan aynı işlemi izleyerek başka bir Kısa Kod bloğu oluşturun.
Bu bloğa aşağıdaki kodu ekleyin: [/oku]
Şimdi metni canlı hale getirmek için ‘Güncelle’ ya da ‘Yayınla’ya tıklayabilirsiniz.
Şimdi WordPress blogunuzu ziyaret edin ve kısa kod blokları arasındaki metnin varsayılan olarak gizli olduğunu göreceksiniz.
Metni göstermek için ‘Devamını Oku’ veya benzeri bir bağlantıya tıklamanız yeterlidir.
Yöntem 2: SeedProd Kullanarak WordPress’te Metin Gösterme ve Gizleme (SSS’ler İçin En İyisi)
SSS’ler, bir WordPress web sitesinde metin gizlemek ve göstermek için kullanılan en yaygın biçimlerden biridir. Güzel bir düzene sahip profesyonel görünümlü bir soru-cevap bölümü oluşturmak istiyorsanız, bunun yerine bir sayfa oluşturucu eklentisi kullanmanızı öneririz.
SeedProd piyasadaki en iyi sayfa oluşturucudur ve WordPress web siteniz için her türlü özel açılış sayfasını oluşturmanıza olanak tanır. Ürünlerinizi, hizmetlerinizi, web seminerlerinizi ve daha fazlasını tanıtmak için kullanabileceğiniz tasarımlar da dahil olmak üzere 300’den fazla hazır site şablonuyla birlikte gelir.
Tüm bu tasarımlar SSS bölümü eklemek için mükemmel bir yerdir.
Bir şablon seçtikten sonra, SeedProd tek bir tıklama ile sayfa tasarımınıza ekleyebileceğiniz farklı hazır SSS bölümlerine bile sahiptir.
Bu SSS bölümlerinin çoğu, yerleşik bir metin gizleme/gösterme geçiş efektiyle birlikte gelir.
Ayrıca tamamen özelleştirilebilirler, böylece kendi soru ve cevap metninizi kolayca ekleyebilirsiniz.
SeedProd’un nasıl kullanılacağı hakkında bilgi için lütfen WordPress’te özel bir sayfanın nasıl oluşturulacağına ilişkin kılavuzumuza bakın.
Bir sayfa oluşturduktan sonra, hazır bir SSS bölümü eklemek kolaydır. SeedProd sayfa editöründe, sol taraftaki menüden ‘Bölümler’ sekmesine tıklamanız yeterlidir.
Artık SeedProd’un tüm soru ve cevap bölümlerini görmek için ‘SSS’yi seçebilirsiniz. Bir tasarımı önizlemek için farenizi üzerine getirin ve ardından küçük büyütece tıklayın.
Kullanmak istediğiniz bir tasarım bulduğunuzda, ‘Bu Bölümü Seç’e tıklayın.
SeedProd daha sonra devam edecek ve bölümü sayfanızın altına ekleyecektir.
Sürükle ve bırak yöntemini kullanarak SSS bölümünü yeni bir konuma taşıyabilirsiniz.
Bundan sonra, SSS akordeon bloğunu seçmek için tıklayarak kendi metninizi eklemeye hazırsınız. Sol taraftaki menü şimdi tüm soruların bir listesini gösterecek şekilde güncellenecektir.
Bir soru ve cevap çiftini düzenlemek için sol taraftaki menüden o soruya tıklamanız yeterlidir.
Bu, kendi sorunuzu ve cevabınızı ekleyebileceğiniz iki küçük metin düzenleyicisi açar. Ayrıca bağlantı eklemek veya metni kalın yapmak gibi tüm standart biçimlendirme seçeneklerini de kullanabilirsiniz.
SSS bölümündeki her soru ve cevap için bu adımları tekrarlamanız yeterlidir.
Daha fazla soru eklemek istiyorsanız, ‘Yeni Öğe Ekle’ düğmesine tıklamanız yeterlidir.
Bir soru ve cevap çiftini silmek için farenizi sol taraftaki menüde o sorunun üzerine getirmeniz yeterlidir.
Ardından, çöp kutusu simgesi göründüğünde üzerine tıklayın.
Girdiğiniz bilgilerden memnun olduğunuzda, ‘Yazı Tipi Boyutu’ ve ‘Aradaki Boşluk’ kaydırıcılarını kullanarak metnin nasıl görüneceğini değiştirebilirsiniz.
Ayrıca SSS’lerdeki her sorunun yanında görünen küçük resmi tanımlayan bir ‘Simge’ bölümü de bulunmaktadır.
Bu resmi özelleştirmek istiyorsanız, ‘Simge’ bölümünü genişletmek için tıklamanız yeterlidir.
Burada, simgenin hizalamasını ve rengini değiştirmek için ayarları göreceksiniz. ‘Kapalı Simge’nin, soru daraltıldığında varsayılan olarak gördüğünüz resim olduğunu unutmayın.
‘Açık Simge’, soru genişletildiğinde gördüğünüz resimdir.
Bunun yerine tamamen farklı bir simge kullanmak istiyorsanız, farenizi ‘Kapalı Simge’ veya ‘Açık Simge’ önizlemesinin üzerine getirin.
Ardından, ‘Simge Kitaplığı’ küçük resmine tıklayın.
Bu, SeedProd’un 1400’den fazla Font Awesome simge yazı tipi arasından seçim yapabileceğiniz yerleşik kitaplığını açar.
‘Gelişmiş’ sekmesini seçerek SSS bölümlerinin nasıl görüneceğini daha da özelleştirebilirsiniz. Burada yazı tipini değiştirebilir, kenar boşluğu ve aralık ekleyebilir ve hatta SSS ‘leri gerçekten öne çıkarmak için CSS animasyonları ekleyebilirsiniz.
Bu işlem tamamlandıktan sonra, yeni bloklar eklemeye ve SeedProd sayfanızdaki içeriği özelleştirmeye devam edebilirsiniz.
Nasıl göründüğünden memnun olduğunuzda, ‘Kaydet’ düğmesinin yanındaki oka tıklayın ve ardından ‘Yayınla’yı seçin.
Şimdi web sitenizi ziyaret ederseniz, sayfa tasarımını ve SSS bölümünü canlı olarak göreceksiniz.
Alternatif: Heroic SSS ile SSS’ler için WordPress’te Metin Gösterme ve Gizleme
Bir SeedProd alternatifi arıyorsanız, Heroic SSS eklentisi ile de metin gösterip gizleyebilirsiniz.
Heroic FAQs, WordPress için en iyi SSS yönetim eklentisidir. Sürükle ve bırak arayüzü, SSS gruplarına kolayca soru ve cevap eklemenizi sağlar.
Ardından, basit bir WordPress bloğu kullanarak SSS’lerinizi web sitenizin herhangi bir yerinde görüntüleyebilirsiniz.
Eklenti birden fazla SSS stili sunar ve sorularınızı ve yanıtlarınızı bir akordeon veya geçiş formatı kullanarak gösterebilir ve gizleyebilirsiniz.
Daha fazla ayrıntı için WordPress’te sık sorulan sorular bölümünün nasıl ekleneceğine ilişkin kılavuzumuza ve en iyi WordPress SSS eklentileri listemize bakın.
Yöntem 3: WordPress Ayrıntılar Bloğu ile Metin Gösterme ve Gizleme (Eklenti Yok)
Bir eklenti veya kısa kod kullanmak istemiyorsanız, metni göstermek ve gizlemek için WordPress’in yerleşik Ayrıntılar bloğunu kullanabilirsiniz. Bu özellik SSS’ler için de harikadır.
Bu bloğu kullanmak için, bir sayfa veya yazı için Gutenberg editörünü açmanız yeterlidir. Ardından, arayüzün herhangi bir yerinde, Ayrıntılar bloğunu bulmak için ‘+ Blok Ekle’ düğmesine tıklayın.
Aşağı doğru ok işaretinin yanındaki boşluğa sık sorulan sorunuzu yazabilirsiniz.
En altta, bu sorunun cevabını yazabilirsiniz.
Blok ayarları kenar çubuğunda, isterseniz cevabın varsayılan olarak açılmasını seçebilirsiniz.
Tamamlandığında, devam edin ve web sitenizi önizleyin. Ardından, ‘Güncelle’ veya ‘Yayınla’ya tıklayın.
Aynı Ayrıntılar bloğunu aynı içerikle başka sayfalarda veya yazılarda kullanmak istiyorsanız, bu bloğu yeniden kullanılabilir bir bloğa veya bir blok modeline dönüştürebilirsiniz. Bu şekilde sıfırdan başlamak zorunda kalmazsınız.
Sayfanızın geri kalanıyla daha iyi görünmesini sağlamak için bloğun yüksekliğini ve genişliğini de değiştirmek isteyebilirsiniz.
Bu makalenin, WordPress yazılarında geçiş efekti ile metin göstermeyi ve gizlemeyi öğrenmenize yardımcı olduğunu umuyoruz. WordPress için en iyi Gutenberg blok eklentileri listemize ve WordPress’te katlanabilir kenar çubuğu menüsü oluşturma kılavuzumuza da 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.
Alvin
The Read More Without Refresh plugin uses display: none; for the hidden text. Won’t that be seen as hidden content and affect SEO negatively?
WPBeginner Support
It should not as the content is set up to display on click. Using display:none would normally have a negative effect if you never plan to have that content visible and can be considered keyword stuffing.
Yönetici
Nwosu Emmanuel
Thank you for helping
WPBeginner Support
Glad we could help!
Yönetici
Karima
Thanks! How can I apply it in new version of WordPress? in the old version you can switch between visual and text. In the new one where to write the code?
WPBeginner Support
You can use the Classic block if you want a similar experience to the classic editor for this shortcode.
Yönetici
Eseoghene Aya
How can i make the show less appear on the bottom of the text?
WPBeginner Support
For the display of the plugin, you would want to reach out to the plugin’s support for the currently available customizations.
Yönetici
john ruark
How can i make the show less appear on the bottom of the text?
WPBeginner Support
You would want to reach out to the plugin’s support for if that is supported at the moment
Yönetici
Dicado
But can one do it without a plugin?
WPBeginner Support
While possible to do this without a plugin, we do not have a beginner friendly method to do this without a plugin
Yönetici
steinchen
nice and simple plugin! this works for me to hide my Attachment sections (which is a long list of print-out with lots of paragraphs).
But I wonder if the notation text can be editable, e.g. not “Hide Press release (123 Less Words)”, but to reflecting my hidden title?:
Show Attachment A1: …
Hide Attachment A1: …
WPBeginner Support
You can change that by editing the more_text in the second shortcode example we show
Yönetici
Anastasia
Thank you very much! It’s working and thus, making my life easier! )
osita Solomon
Thanks admin fr this wonderful post but i would like to know if it would be possible for me to embed a popunder link under the “show more” toggle.
Thanks
Ranjan
Is it possible to use this plugin on multiple paragraphs on a static page? I want to use it to show/hide information in single code. If so, what “type” would it be?
I have tried with one code but paragraph formatting is not possible,
when clicked on more we get the text in continuation
Thanks!
Annette
How did you “Add the short code like this?” Do you hover? Right click? Type it out? When I type in the short code, my pages literally show the words. Help please!!
Robert
Is that plugin good to hide phone number on my website? I want to hide last four number on my site. And when people come and want to see my number they must click on number to show last four number.I wont do this because some people use my phone with some program and give another people. If someone know good plugin I will be very helpful for help.Thanks.
shaz
thanks it still works in 2017
Faisal Maitho
Thank you so much, i apply this plugin on my website its really very useful thanks again.
Dat
hello i want the word show more and show less is in the center of my page. how can i do ?
Jessica
Is there a way to hide one content when another is being viewed?
Virena
I followed the instructions but seems like Wordpress doesn’t allow the code to work on free themes.
Is there any other way how this can be made?
Ed
Can I show/hide nested elements too with it ?
mike
Doesn’t appear to be working in draft mode (need to iron things out before I publish page). Pasting shortcode in text editor and visual editor but when I preview I see shortcode and nothing’s hidden. Is this normal?
milan
Hi.
I have some texts in columns that arnt same in length witch messes with grid. I need plugin that can hide second part of the text- the excess, and to show it in continuity with first part.
What do u recommend?
Sav
I am also wondering how to replace the “show more”, “show less” text with a custom button image. How is this possible?
Federica
Hello,
This is sounds like a great plugin.
I wonder if there’s any chance to use it to toggle the posts on a front page by clicking on their title?
If not, is there any plugin or code that allows that?
Thank you in advance.
Federica
David Kallander
Trying to center the show/hide text but it’s left justified on the webpage. I’ve tried so many HTML tags, but to no avail.
Thanks,
Janie S.
Hi there,
Thank you very much for sharing this quick video. It was indeed very easy to install. In your video the link are all aligned to the left. I tried to do it with the plugin instructions as written by the creator of the plugin but I can’t manage to make it work. It is always shows centered.
Can you please help me with this issue please?
Thank you so much!
Umar sajjad
I want to use Show hide multiple time on a page.
lakshman
sir I want to change the “show more text” with text with” buttons” how to do it please explain or give the coding for it…………..
lakshman
sir I want to change the “text” with text with buttons how to do it please explain or give the coding for it…………..
Dana
What if I want to see multiple Show/Hide features on a page. The toggle doesnt seem to work for that!
Paul
Just add sequential numbering to your tags.
ie
[showhide type=”post1″ more_text=”Show more…” less_text=”Show less…”]
Text you want to hide
[/showhide]
[showhide type=”post2″ more_text=”Show more…” less_text=”Show less…”]
Text you want to hide
[/showhide]
etc
Umar sajjad
Hi Paul,
i am using Type = ‘post1’ , post2,post3 but its not working for mine.
Randy Utama
Hello,
Is this plugin support responsive or mobile theme?
Thanks
Mohammad Qaiser
Does toggling content has any effect on SEO. Is Google Bot able to analyze toggled content also.
WPBeginner Support
Yes, Google bot is able to read the toggled and untoggled content.
Yönetici
Bhanu
Thanks but I didn’t understand it clearly. I want to know whether the toggle content is indexed by google or google ignores the toggled content?
WPBeginner Support
yes it is indexed by Google.
Grant
I want to hide or show all citations/references depending on the readers desires. I don’t want to create duplicate articles with and without the footnotes. Is there any way to toggle all content visibility at once from a single control?
Ibn Kassiem
Hi
Thanks for the post.
I wanted to know is it possible to use this plugin to create an archive page that ONLY shows the post titles, when the user clicks on the toggle it shows the full post and can also close it again.
Or can you advise on a better way to do this please?
WPBeginner Support
This plugin is not the best way to do that. What you need is to modify archives.php template in a child theme and then add the toggle effect before <?php the_content() ?> or <?php the_excerpt() ?> template tag.
Yönetici
eleven-yu
It is a good plugin.!
But I need a new feature that is I hide some content example dowloadlink, the link can display only after comment my post.
Could you help to import it?
thx.
Grace
I like this, but do you know if this can or if it can be modified to toggle the comments area? I would love to be able to allow the user to hide and show the various comments rather then them all to be displayed.
Thanks in advance
WPBeginner Support
Nope the plugin does not support that at the moment.
Yönetici
ampatel
Nice plugin, but is it possible to have multiple read more’s/read less?
Thanks
Mark Kolodziej
I would like to know this as well.
WPBeginner Support
Take a look at our jQuery FAQ Accordion tutorial. Ignore the FAQ’s part and you can implement the same jQuery on any text you want.
Yönetici
Jumpringer
I’d like to place multiple “show/hides” on my page. Not clear how to implement the jQuery found on the jQuery FAQ Accordian link . I think you are saying that a WP FAQ section is not needed, is that correct?
When I uploaded the “my-accordian” folder to the plugins directory, WP recognized the “WPBeginner’s FAQ Accordion” plugin.
Can you provide some more detail to enable multiple “show/hides” on pages not using the WP FAQ? Thanks so much.
Amanda Mays
Is it possible to use this plugin on paragraphs on a static page? I want to use it to show/hide sections of my privacy policy. If so, what “type” would it be?
Thanks!
Nico
Super useful! You saved me from learning how to do it myself =) haha
Thanks!
Bella's Shelf
Thank you for this site of wonderful info! I am brand new to hosted WP & every time I Google something Example: “Install Google Analytic on Wordpress” I ALWAYS pick your site for the answer. I didn’t realize I was doing it until tonight!
Thank you for helping us WP Noobs and Olds alike!
Clawrence
Is it possible to add an image where the ‘Show more…’ text is, so that the image can be clicked to show more/less text instead of a generic sentence?
Editorial Staff
You can most likely customize the plugin to do that.
Yönetici
Adam Kellett
How is this done? I’ve tried this with no success:
[showhide type=”…” more_text=”” less_text=”” hidden=”yes”]
Is it complicated to make this customization?
fukr
i want to say this is really useful..thanks