Är du intresserad av att använda shortcodes på rätt sätt på din website i WordPress?
Shortcodes i WordPress allow you to add various functionality to posts, pages, and widgets without actually writing any code. Många WordPress plugins och vissa themes använder shortcodes för att add to olika element, t.ex. grid för price och kalendrar för händelser, i WordPress.
I den här artikeln kommer vi att dela med oss av 7 viktiga tips för att använda shortcodes i WordPress.
Vad är shortcodes i WordPress?
Allt content som läggs till på en WordPress website går igenom vissa säkerhetskontroller och filter. Dessa kontroller och filter ser till att ingen skadlig kod kommer in i posts, pages, comments med mera. Det innebär att du inte kan skriva kod direkt i dessa area.
Å andra sidan behöver du ibland bara lägga till kod i dessa områden. Shortcodes ger ett sätt att göra det.
Shortcodes gör det enklare att add to andra element till WordPress posts. Du kan till exempel add to en beautiful responsive slider med hjälp av en enkel shortcode. Du kan också skapa ett komplext formulär för en undersökning i WordPress utan att skriva en enda rad kod.
Med detta sagt, låt oss ta en titt på några tips för att använda shortcodes i WordPress. Du kan clicka på länkarna under för att hoppa vidare till något tips:
Tips 1: Vet när du ej ska använda shortcodes
Shortcodes är bra, men att använda shortcodes i varje post är ej en bra idé. Det finns många WordPress teman som stolt hävdar att de har 200+ shortcodes.
Men om du använder en shortcode i varje blogginlägg i WordPress är du för alltid bunden till det specifika theme som provider shortcoden.
Om du använder en temaspecifik shortcode för att skapa call-to-action-knappar i dina posts eller pages, bör du titta på vår guide om hur du lägger till CSS-knappar i WordPress utan att använda shortcodes.
If you find yourself adding the shortcode in every theme to add the same element, such as a banner ad or signature text at the end of your post, then you may want to use a WordPress plugin or hire a developer to code that directly into your theme.
Detta gör det lättare att styla det elementet och enkelt ta bort det om du bestämmer dig för att göra det.
Kom ihåg att om du använder en shortcode i varje post och senare vill ta bort den, måste du redigera alla posterna för att manuellt ta bort den. Det finns dock ett enklare sätt som vi kommer att visa dig senare i den här artikeln.
Tips 2: Framtidssäkra dina shortcodes
Shortcodes är bra, men om det tillhandahålls av ditt theme, kanske du vill tänka två gånger om att överdriva användningen av dem. Varför är det så?
För om du ändrar ditt tema, kommer ditt nästa tema troligen inte att ha samma shortcode.
Det bästa sättet att förhindra detta är att lägga till ett site-specifikt plugin.
Du behöver bara copy and paste snippet med shortcode från functions.php-filen i ditt theme och sedan klistra in det i ditt site-specifika plugin.
Att direkt editera filen functions.php är dock inte att rekommendera. Minsta misstag kan vara förödande för din site. Ett enklare sätt att lägga till ett shortcode snippet till ditt theme är genom att använda WPCode plugin.
Det gör det mycket enkelt att add code snippets till din site och hantera dem från WordPress dashboard.
För mer information, vänligen se vår guide om hur du lägger till custom code i WordPress.
Tips 3: Så här söker du efter shortcodes i ditt WordPress Theme
För att framtidssäkra din shortcode måste du veta hur shortcode-funktionen gillar att se ut och hur du hittar den i ditt theme.
Först måste du öppna ditt temas folder, som vanligtvis finns i /wp-content/themes/your-theme-name/.
You want to look inside the functions.php file, or if the theme has an includes folder, then inside there.
Öppna filerna och sök efter termen add_shortcode.
Här är ett exempel på hur ett shortcode snippet gillar att se ut:
function my_shortcode_function() {
$i = '<p>Hello World!</p>';
return $i;
}
add_shortcode('my-shortcode', 'my_shortcode_function');
Den här koden skapar en shortcode ”my-shortcode”, som returnerar en enkel texthälsning och kan embedas i en WordPress post eller page gillar detta:
[my-shortcode]
Du kan se vår guide om hur du skapar en shortcode i WordPress.
Tips 4: Använda shortcodes i widgetar
Användare tror ofta att shortcodes är limiterade till posts och pages, men det är de ej. Du kan använda dem i dina textwidgets i WordPress.
Dra och släpp helt enkelt en textwidget till din sidebar och add to din shortcode i den.
Kom ihåg att den här funktionen inte är aktiverad som standard i WordPress. Om du inte kan se din shortcode i ett widget måste du add to denna kod till ditt temas functions.php-fil eller ett site-specifikt plugin.
add_filter('widget_text', 'do_shortcode');
Tips 5: Add Shortcode i Theme Files
Om du av någon anledning finner ett behov av att mata ut shortcoden i ett område som inte är widgetar i ditt theme, kan du använda dina shortcodes där också.
Låt oss anta att du har skapat en custom page template, och du vill inkludera en shortcode för att visa ett kontaktformulär. Lägg helt enkelt till din shortcode så här:
<?php echo do_shortcode("[example_shortcode]"); ?>
Om du behöver hjälp kan du vänligen läsa vår guide om hur du klistrar in snippor från webben i WordPress.
Tips 6: Dölja en trasig shortcode
Ofta ändrar användare sina themes utan att inse att deras gamla shortcodes inte kommer att fungera. Ibland får de reda på det efter flera månader när en användare besöker deras gamla post och hittar konstig text där.
Tja, du har två sätt att fixa det. Du kan antingen manuellt ta bort shortcoden från varje post eller dölja den trasiga shortcoden.
Allt du behöver göra är att add to följande kod till functions.php-filen i ditt theme eller använda WPCode:
add_shortcode( 'shortcodetag', '__return_false' );
Den här koden addar tillbaka den föräldralösa shortcoden utan utdata. Glöm inte att ersätta shortcodetag med namnet på din shortcode.
Tips 7: Hitta shortcodes som används i poster
Om du inte vill använda hacket i Tips 6 och vill ta bort alla shortcodes manuellt, är det första steget att hitta alla posts som använder shortcoden.
Du kan använda den här koden i ditt temas functions.php-fil eller ett site-specifikt plugin som WPCode för att göra det hårda arbetet åt dig:
function wpb_find_shortcode($atts, $content=null) {
ob_start();
extract( shortcode_atts( array(
'find' => '',
), $atts ) );
$string = $atts['find'];
$args = array(
's' => $string,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php
}
echo '</ul>';
} else {
echo "Sorry no posts found";
}
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('shortcodefinder', 'wpb_find_shortcode');
Den här koden skapar helt enkelt en shortcode som heter shortcodefinder. Den runar en sökning i WordPress och listar posts med en given shortcode tagged.
Om du t.ex. vill hitta alla posts som innehåller shortcode [contact-form], kan du helt enkelt enter [shortcodefinder find=’contact-form’] på en page i WordPress och save den. Om du nu previewar sidan kommer du att kunna se alla posts som innehåller shortcoden.
Om du vill ha mer detaljerade instruktioner kan du kontrollera vår guide om hur du hittar och döljer oanvända shortcodes i WordPress.
Vi hoppas att dessa tips hjälpte dig att lära dig hur du använder shortcodes och få ut det mesta av dem i WordPress. Du kanske också vill se vår ultimata guide till sökmotorsoptimering i WordPress och hur man startar en store.
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.
Justin
Hi I’m using Short-codes for layouts in my blog posts (image right, text left, with a lot more responsive styling than Gutenberg can do), but wondering, does this effect the onsite SEO? Are my layouts still rendered as HTML and readable by bots? – Thanks!
WPBeginner Support
Your content should be rendered as HTML on the front end of the site. The shortcode is for the backend of your site so WordPress knows what content to place there.
Administratör
Alexandre ..
the social icons in this article, at the end of the post, are they added by a plugin (what plugin) or hard coded? how can i add them to my own posts?
WPBeginner Support
Hi Alexandre,
It is custom code written specifically for this website. You can try one of these social media plugins to replicate the same look on your website.
Administratör
Seamate
I have been trying to use shortcodes, particularly Latex shortcodes in the quiz section of the LMS I am using, all to no avail. The shortcodes are not passed. I have contacted the LMS providers but they are not coming up with any solution, at least, not yet. Is there anything I can do?
Mohammed Azharuddin
Thanks… Very helpfull
malina
when I use shortcode , the shortcode always show at the top
Devid
Is it safe to apply multiple shortcodes to the same page in the same section?
Md Abu Selim
I wish to learn WordPress Theme Development , So I think that the site is very helpful for me.
akki
hi nice post! how can i make a custom code for slider and make dynamic.i upload images from back end,
Minhaj
Hi,
I want to put my shortcode in html hyper link in button or something.
like my shortcode is [shortcode]
and my html code is Dummy
Then how will I put [shortcode] in html code and my html code is Dummy
WPBeginner Support
Please see our guide on how to add a shortcode in WordPress.
Administratör
marie
I have a problem with my short codes in that the text within the buttons does not look very professional as the first letter is only showing half. This is not with every one, just some of them. I would be most grateful for a suggestion
Praveen
Hello, I have a question about shortcodes. As I am running a WordPress website that is based on Online Practice Test / Quizzes. To provide these quizzes I am using a plugin and in that plugin I have to add the questions and answers for a quiz. After that I have to put that shortcode in the post.
My Post Structure
Title
[Shortcode]
then in SEO Title and Description by All in One SEO plugin.
So my question is, using the only shortcode in all post is safe from the SEO and Google webmasters Guideline point of view ?
WPBeginner Support
Yes, it is totally safe. The shortcode never appears in the HTML of your website. Like any other PHP funtion, your shortcode is processed by the server and returns the HTML output which is then displayed on your post/page.
Administratör
Giochi MMO
There is a way to delete a specific shortcode, maintaining the text inside?
For example: in this case [dropcap]A[/dropcap] I would like to eliminate the shortcode maintaining the ”A”, or any other letter inside.
Thanks!
Kate Ford
I am locked into using a specific theme for business reasons, and it
lacks some bells and whistles that are necessary and must be used with
short codes. While the short codes get the job done, there is is one
element we have to keep in mind:
Don’t overuse short codes for important text elements if it compromises search engine returns.
We
have two plug ins for short codes — one of these keeps the text
elements right in the post, but the other generates the content in the
plug in, and only the code is inserted into the post — so there is no
actual TEXT associated with that post.
For instance, we created
some grid like photo galleries using a plug in that relies on short
codes. The galleries and their captions are created inside the plug-in,
but only the short code linking to it is published in the post. While
the post itself has SEO fields to complete, the text (and links) from
the photo captions actually doesn’t exist IN the post — it exists in
the output created by the plug-in, which does NOT have SEO fields. When
I need to edit the gallery, I don’t edit the post, because all it says
is [Grid 123]. I edit the gallery in the plug-in setting.
So,
while it ”looks great” on the post, we have to weigh what is most
important: Does this post need a great looking gallery which may not
give me any search engine returns, or is the TEXT for gallery more
important and I need it to be crawled?
We have a page with FAQ
and used short codes to make an accordion style display. Toggling a
question reveals the answer, and then it closes again. On this page, we
used short codes, but we relied on a different plug in which keeps the
text IN the post, and simply styles it the way we need. In that manner,
the text remains part of the post, the word count is accurate, and it
is crawled by search engines. The short codes merely provide the
requested style.
So bottom line, if you have content
that’s important and should be crawled, avoid short codes if they store
the information apart or separate from your post.
Tony Franco
Hi! Nice post! Please how can i make a shortcode to print an image?
Thanks!
Gyan
Hii Tony Franco.
this is incomplete question. please specify where and which image you want to use. what context you are talking about . ?