Öncelikle editörünüzün eklentiler bölümünde WordPress diye aratıp hazır snippetsları ekleyin. VS Code için şu eklenti gayet iyi
https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet
Sürekli kullandığımız ve aklımızda kalmayan ya da yazmaya üşendiğimiz kodları bu tür bir programda saklıyoruz. Ya da editörününüzün snippets bölümünü kullanabilirsiniz.
Şu an bende mevcut olan snippetslar şu şekilde:
Tüm kod parçacıkları
WP Snippets
Kses
HTML içeriğindeki izin verdiğiniz tagleri çıktı veriyor.
$allowed_tags = array(
‘div’ => array(
‘class’ => array()
),
‘a’ => array(
‘href’ => array()
),
);
echo wp_kses( $content , $allowed_tags );
İçinde data olan değişkeni translate’i mümkün olacak hale getirmek
printf(
' or <a href="%s">%s</a>',
esc_url( 'mailto:info@example.com', array( 'mailto' ) ),
esc_html__( 'Email', 'text-domain' )
);
Child Theme
Child Theme’i plugin ile kuruyorum ama kurduktan sonra function sayfasını bu şekilde değiştiriyorum
<?php
// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// AMC CUSTOMIZED
// Child Styles
function amc_child_styles() {
wp_enqueue_style( 'amc-child-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'amc_child_styles' );
// AMC CUSTOMIZED FINISH
Remove Action
function remove_example_action(){
remove_action( 'wp_enqueue_scripts', 'wplook_css_include' );
remove_action('wp_enqueue_scripts', 'wplook_scripts_include');
}
add_action( 'wp_loaded', 'remove_example_action' );
Script Enqueue etme
wp_enqueue_script( 'pho-child-custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
CSS Snippets
SVG’yi Background’a ekleme
position: absolute;
left: 0;
top: 0;
content: "";
width: 26px;
height: 26px;
background: url(img/link.svg) center;
background-size: 100% !important;
background-repeat: no-repeat;
Responsive Viewports
@media only screen and (min-width: 480px) and (max-width: 767px) {
@media (max-width: 480px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }