AIT WEB DESIGN - изработка на сайт и СЕО оптимизация

  • Начало
  • Услуги
    • УЕБ САЙТ ИЗРАБОТВАНЕ
    • Изработка на One Page и Landing Page сайтове
    • WordPress Разработки
    • ПОДДРЪЖКА НА WORDPRESS САЙТ
    • ЕЛЕКТРОННИ МАГАЗИНИ
    • Изработка на онлайн каталог
    • Изработка на сайт за недвижими имоти
    • Изработка на портфолио сайт за художници, фотографи и творци
    • ПРЕВОД НА УЕБ СТРАНИЦИ
    • ИЗРАБОТКА НА ЛОГО
    • ОПТИМИЗАЦИЯ НА САЙТ
    • СОФТУЕР ПО ПОРЪЧКА
    • БЕЗПЛАТЕН САЙТ
  • ХОСТИНГ И ДОМЕЙН
    • Партньорска програма за уеб агенции
  • ЗА НАС
  • ПОРТФОЛИО
  • РЕФЕРЕНЦИИ
  • БЛОГ
  • КОНТАКТИ
  • Начало
  • 2016
  • Page 2
13.04.2026

Year: 2016

Как да направим нов филтър в WordPress администрацията по custom taxonomy и в custom post type

  • 0
afilipov
четвъртък, 30 юни 2016 / Published in Wordpress, Код оптимизация
add_action('restrict_manage_posts','my_restrict_manage_posts');

function my_restrict_manage_posts() {
			global $typenow;

			if ($typenow=='job_listing'){
                         $args = array(
                             'show_option_all' => "Show All Cities",
                             'taxonomy'        => 'listing_cities',
                             'name'               => 'listing_cities'

                         );
				wp_dropdown_categories($args);
                        }
		}
add_action( 'request', 'my_request' );
function my_request($request) {
	if (is_admin() && $GLOBALS['PHP_SELF'] == '/wp-admin/edit.php' && isset($request['post_type']) && $request['post_type']=='job_listing') {
		$request['listing_cities'] = get_term($request['listing_cities'],'listing_cities')->name;
	}
	return $request;
}

Как да си направим контактна форма в WordPress без инсталиране на модул

  • 0
afilipov
неделя, 26 юни 2016 / Published in Wordpress, Код оптимизация

Send email

$data = @$_POST;
 
$err = array();
if(!empty($_POST)){
 
    if(empty($_POST["your_name"])){
        $err["your_name"] = true;
    }
  
    if(empty($_POST["your_email"])){
        $err["your_email"] = true;
    }
 
    if(empty($_POST["your_subject"])){
        $err["your_subject"] = true;
    }
  
    if(empty($_POST["your_message"])){
        $err["your_message"] = true;
    }
 
  
    if(empty($err)){
        $your_name = strip_tags($_POST["your_name"]);
        $your_company = strip_tags($_POST["your_company"]);
        $your_phone = strip_tags($_POST["your_phone"]);
        $your_email = strip_tags($_POST["your_email"]);
        $your_subject = strip_tags($_POST["your_subject"]);
        $your_message = strip_tags($_POST["your_message"]);
  
        $caption = "Contactform";
        $admin_email = get_option("admin_email");
  
        ob_start();
        include("template-contact-mail.php");
        $mail_content = ob_get_contents();
        ob_end_clean() ;
  
        $headers = 'Content-Type: text/html; charset=UTF-8'.'\r\n';
        $headers .= 'From: '.$your_name.' <'.$your_email.'>' . "\r\n";
  
        $success = wp_mail($admin_email, $caption, $mail_content, $headers);
 
        header("Location: ".get_permalink(PAGE_ID_SUCCESS_CONTACT)); die;
    }
}

<form action="" method="post" class="wpcf7-form">
    <p<?php if(!empty($err["your_name"])): ?> class="err"<?php endif; ?>>
        <label><?php _e("Вашето име") ?> (*):</label>
        <span class="wpcf7-form-control-wrap"><input type="text" name="your_name" value="<?php echo $data["your_name"] ?>" size="40" class="wpcf7-form-control wpcf7-text" /></span>
    </p>
    <p<?php if(!empty($err["your_company"])): ?> class="err"<?php endif; ?>>
        <label><?php _e("Company") ?>:</label>
        <span class="wpcf7-form-control-wrap"><input type="text" name="your_company" value="<?php echo $data["your_company"] ?>" size="40" class="wpcf7-form-control wpcf7-text" /></span>
    </p>
    <p<?php if(!empty($err["your_phone"])): ?> class="err"<?php endif; ?>>
        <label><?php _e("Phone") ?>:</label>
        <span class="wpcf7-form-control-wrap"><input type="text" name="your_phone" value="<?php echo $data["your_phone"] ?>" size="40" class="wpcf7-form-control wpcf7-text" /></span>
    </p>
    <p<?php if(!empty($err["your_email"])): ?> class="err"<?php endif; ?>>
        <label><?php _e("Email") ?> (*):</label>
        <span class="wpcf7-form-control-wrap"><input type="email" name="your_email" value="<?php echo $data["your_email"] ?>" size="40" class="wpcf7-form-control wpcf7-text" /></span>
    </p>
    <p<?php if(!empty($err["your_subject"])): ?> class="err"<?php endif; ?>>
        <label><?php _e("Subject") ?> (*):</label>
        <span class="wpcf7-form-control-wrap"><input type="text" name="your_subject" value="<?php echo $data["your_subject"] ?>" size="40" class="wpcf7-form-control wpcf7-text" /></span>
    </p>
    <p<?php if(!empty($err["your_message"])): ?> class="err"<?php endif; ?>>
        <label><?php _e("Message") ?> (*):</label>
        <span class="wpcf7-form-control-wrap"><textarea name="your_message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea"><?php echo $data["your_message"] ?></textarea></span>
    </p>
 
    <p>
        <input type="submit" value="submit" class="wpcf7-form-control wpcf7-submit" />
    </p>
</form>

template-contact-mail.php

<br />Onderwerp: <?php echo $caption ?>
<br />
<br />NAME:
<br /><?php echo $your_name ?>
<br />
<br />COMPANY:
<br /><?php echo $your_company ?>
<br />
<br />PHONE:
<br /><?php echo $your_phone ?>
<br />
<br />E-MAIL ADDRESS:
<br /><?php echo $your_email ?>
<br />
<br />SUBJECT:
<br /><?php echo $your_subject ?>
<br />
<br />MESSAGE:
<br /><?php echo $your_message ?>
<br />
<br />--
<br />atanasfilipov.com

Sticky footer или как да задържим footer-а в долната част на страницата

  • 0
afilipov
неделя, 26 юни 2016 / Published in CSS, Код оптимизация
<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>
html,body {margin: 0; padding: 0; height: 100%}
#container {min-height: 100%; position: relative}
#body {padding-bottom: 60px;}
#footer {position: absolute; bottom: 0; width: 100%; height: 60px}

Media queries

  • 0
afilipov
неделя, 26 юни 2016 / Published in CSS, Код оптимизация

HTML head

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">

style.css

@media screen and (max-width:979px){
    ....
}
 
@media screen and (min-width:980px){
    ....
}
 
@media screen and (min-width:765px) and (max-width:980px){
    ....
}

Използване на font-face

  • 0
afilipov
неделя, 26 юни 2016 / Published in CSS
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Custom Пермалинкове за йерархични таксономии

  • 0
afilipov
петък, 24 юни 2016 / Published in Wordpress, Код оптимизация

Индекс на базата ( http://example.com/faq/ ) [Индекс на цялата база]

  • Основна категория ( http://example.com/faq/category/ ) [Индекс на Основната категория]
    • Публикация в основната категория ( http://example.com/faq/category/post-1-slug/ ) [Преглед на Публикация 1]
    • Под-категория ( http://example.com/faq/category/sub-category/ ) [Индекс на под-категорията]
      • Публикация в под-категорията ( http://example.com/faq/category/sub-category/post-2-slug/ ) [Преглед на Публикация 2]
  • Друга основна категория ( http://example.com/faq/another-category/ ) [Индекс на другата основна категория]

Всичко изглежда нормално(като структура на линковете) за нормалния потребител, обаче WordPress е на друго мнение по въпроса Вместо линк като http://example.com/faq/category/  ние ще можем да видим индекса на основната категория на линк от рода на http://example.com/faq-category/category/. Което както виждате не съвпада съвсем с първоначалната идея. За да оправим този проблем трябва да прибегнем до добавянето на няколко специално написани Permalink правила и функции.

Първата стъпка е да регистрираме новия пост тип(Custom Post Type). Това се случва със следната функция:

 

<?php

add_action( 'init', 'register_faq_post_type' );
function register_faq_post_type() {
	register_post_type( 'faq',
		array(
			'labels' => array(
				'name' => 'Frequently Asked Questions',
				'menu_name' => 'FAQ Manager',
				'singular_name' => 'Question',
				'all_items' => 'All Questions'
			),
			'public' => true,
			'publicly_queryable' => true,
			'show_ui' => true,
			'show_in_menu' => true,
			'show_in_nav_menus' => true,
			'menu_position ' => 20,
			'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'comments', 'post-formats', 'revisions' ),
			'hierarchical' => false,
			'has_archive' => 'faq',
			'rewrite' => array( 'slug' => 'faq-item', 'hierarchical' => true, 'with_front' => false )
		)
	);

	register_taxonomy( 'faq-category', array( 'faq' ),
		array(
			'labels' => array(
				'name' => 'FAQ Categories',
				'menu_name' => 'FAQ Categories',
				'singular_name' => 'FAQ Category',
				'all_items' => 'All Categories'
			),
			'public' => true,
			'hierarchical' => true,
			'show_ui' => true,
			'rewrite' => array( 'slug' => 'faq-category', 'hierarchical' => true, 'with_front' => false ),
		)
	);
}

?>

Този код ще регистрира новия пост тип, заедно с новата таксономия „FAQ Categories“, която ще използваме за да категоризираме въпросите.

След като регистрираме новия пост тип остава да добавим две функции които да направят така че Permalink-овете да работят както искаме ние

<?php

add_action( 'generate_rewrite_rules', 'register_faq_rewrite_rules' );
function register_faq_rewrite_rules( $wp_rewrite ) {
	$new_rules = array( 
		'faq/([^/]+)/?$' => 'index.php?faq-category=' . $wp_rewrite->preg_index( 1 ),
		'faq/([^/]+)/([^/]+)/?$' => 'index.php?post_type=faq&faq-category=' . $wp_rewrite->preg_index( 1 ) . '&faq=' . $wp_rewrite->preg_index( 2 ),
		'faq/([^/]+)/([^/]+)/page/(\d{1,})/?$' => 'index.php?post_type=faq&faq-category=' . $wp_rewrite->preg_index( 1 ) . '&paged=' . $wp_rewrite->preg_index( 3 ),
		'faq/([^/]+)/([^/]+)/([^/]+)/?$' => 'index.php?post_type=faq&faq-category=' . $wp_rewrite->preg_index( 2 ) . '&faq=' . $wp_rewrite->preg_index( 3 ),
	);

	$wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
}

// A hacky way of adding support for flexible custom permalinks
// There is one case in which the rewrite rules from register_kb_rewrite_rules() fail:
// When you visit the archive page for a child section(for example: http://example.com/faq/category/child-category)
// The deal is that in this situation, the URL is parsed as a Knowledgebase post with slug "child-category" from the "category" section
function fix_faq_subcategory_query($query) {
	if ( isset( $query['post_type'] ) && 'faq' == $query['post_type'] ) {
		if ( isset( $query['faq'] ) && $query['faq'] && isset( $query['faq-category'] ) && $query['faq-category'] ) {
			$query_old = $query;
			// Check if this is a paginated result(like search резултата)
			if ( 'page' == $query['faq-category'] ) {
				$query['paged'] = $query['name'];
				unset( $query['faq-category'], $query['name'], $query['faq'] );
			}
			// Make it easier on the DB
			$query['fields'] = 'ids';
			$query['posts_per_page'] = 1;

			// See if we have резултата or not
			$_query = new WP_Query( $query );
			if ( ! $_query->posts ) {
				$query = array( 'faq-category' => $query['faq'] );
				if ( isset( $query_old['faq-category'] ) && 'page' == $query_old['faq-category'] ) {
					$query['paged'] = $query_old['name'];
				}
			}
		}
	}

	return $query;
}
add_filter( 'request', 'fix_faq_subcategory_query', 10 );

?>

В горния код регистрираме две функции – register_faq_rewrite_rules() и fix_faq_subcategory_query().

Първата функция добавя следните няколко правила:

  • faq/([^/]+)/?$ – това правило ще бъде приложено когато адреса на страницата която се зарежда прилича на „faq/any-character/“ – тоест когато имаме начална част „faq/“ последвана от всякаква комбинация от символи, без „/“( „([^/]+)“ ), евентуално последвана от „/“( „/?“ ). Също така тази част трябва да е последната част от адреса на страницата, за да има съвпадение(т.е. няма да има съвпадение, ако адреса е „faq/any-character/something“).Когато адреса съвпадне, на текущата страница ще бъде показан архив за категорията(според примера който дадох по-горе) „any-character“.
  • faq/([^/]+)/([^/]+)/?$ – това правило е почти същото като предишното, с изключение на това че вече адреса който би съвпаднал би изглеждал като „faq/any-character/post-slug/“.Това ще зареди публикация с кратко име(slug) „post-slug“ от категорията за ЧЗВ с кратко име „any-character“.
  • faq/([^/]+)/([^/]+)/([^/]+)/?$ – това правило е почти същото като предишното, с изключение на това че вече адреса който би съвпаднал би изглеждал като „faq/any-character/sub-category/post-slug/“.Това ще зареди публикация с кратко име(slug) „post-slug“ от категорията за ЧЗВ с кратко име „sub-category“.

Втората функция от друга страна оправя проблема със под-категориите. А самият проблем се състои в това, че когато се опитате да заредите страница с адрес faq/category/child-category/, WordPress ще се опита да зареди публикация с кратко име „child-category“ вместо под-категорията с кратко име „child-category“. Самата функция е по всяка вероятност не най-красивото решение на проблема, най-малкото защото трябва да направим една допълнителна заявка към базата данни, но това е единствения начин по който успях да реша проблема Понеже функцията проверява дали има публикации с краткото име „child-category“, ако случайно има такава публикация, може да получите неочаквани резултати

Това е достатъчно за да подкарате секцията за ЧЗВ, обаче в момента ако искате да използвате пълноценно новите адреси на категориите и публикациите, ще трябва да си ги пишете сами. Това е защото WordPress не знае как трябва да генерира линковете така че да съвпадат с нашата идея. За това добавяме още няколко функции:

 

<?php

function faq_article_permalink( $article_id, $section_id = false, $leavename = false, $only_permalink = false ) {
	$taxonomy = 'faq-category';
	$article = get_post( $article_id );

	$return = '<a href="';
	$permalink = ( $section_id ) ? trailingslashit( get_term_link( intval( $section_id ), 'faq-category' ) ) : home_url( '/faq/' );
	$permalink .= trailingslashit( ( $leavename ? "%$article->post_type%" : $article->post_name ) );
	$return .= $permalink . '/" >' . get_the_title( $article->ID ) . '</a>';
	return ( $only_permalink ) ? $permalink : $return;
}

function filter_faq_post_link( $permalink, $post, $leavename ) {
	if ( get_post_type( $post->ID ) == 'faq' ) {
		$terms = wp_get_post_terms( $post->ID, 'faq-category' );
		$term = ( $terms ) ? $terms[0]->term_id : false;
		$permalink = faq_article_permalink( $post->ID, $term, $leavename, true );
	}
	return $permalink;
}
add_filter( 'post_type_link', 'filter_faq_post_link', 100, 3 );

function filter_faq_section_terms_link( $termlink, $term, $taxonomy = false ) {
	if ( $taxonomy == 'faq-category' ) {
		$section_ancestors = get_ancestors( $term->term_id, $taxonomy );
		krsort( $section_ancestors );
		$termlink =  home_url( '/faq/' );
		foreach ( $section_ancestors as $ancestor ) {
			$section_ancestor = get_term( $ancestor, $taxonomy );
			$termlink .= $section_ancestor->slug . '/';
		}
		$termlink .= trailingslashit( $term->slug );
	}

	return $termlink;
}
add_filter( 'term_link', 'filter_faq_section_terms_link', 100, 3 );

?>

Горните функции „филтрират“ резултата от две вградени в WordPress функции, които се грижат да създадат правилните линкове за всички страници, публикации и архиви на таксономии.

Остава един проблем, който може да не е никак малък за някои потребители – проблема с дубликиращото се съдържание. Има доста голяма вероятност Google или някоя друга търсачка която обхожда сайта ви да не остане очарована от факта, че намира идентично съдържание на два различни адреса(например faq-item/post-2-slug/ и faq/category/sub-category/post-2-slug/). Това може да се избегне с една функция която да препраща потребителите към правилния адрес, но оставям това на вас.

 

Източник:  http://themoonwatch.com/bg/%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F/php-i-wordpress/#sthash.GBKCWoNy.dpuf

Полезни модули за WordPress

  • 0
afilipov
петък, 24 юни 2016 / Published in Wordpress

– qTranslate X
– Loco Translate

– Contact Form 7
– WP Google Map Plugin

– Google Analytics for WordPress
– WordPress SEO
– Google XML Sitemaps

– Advanced Custom Fields
– Meta Slider
– WooCommerce *

– Admin Columns

– Contact Form DB
– WP Lightbox 2
– Назадground Per Page
– WYSIWYG Widgets / Widget Blocks
– HC Text Widget
– Gallery
– WP Simple Galleries
– TinyMCE Advanced
– Disable Comments
– Simple 301 Redirects
– YouTube SimpleGallery
– Share Buttons by AddToAny
– Resize Image After Upload
– Imsanity
– Category Order and Taxonomy Terms Order

Добър и лесен трик при местене на WordPress сайт на нов домейн

  • 0
afilipov
петък, 24 юни 2016 / Published in Wordpress
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.old-domain.com', 'http://www.new-domain.com');

UPDATE wp_posts SET guid = replace(guid, 'http://www.old-domain.com', 'http://www.new-domain.com');

Как да направим дизайн на WordPress Login screen

  • 0
afilipov
петък, 24 юни 2016 / Published in Wordpress

Влезте в папката на Вашата тема и отворете с редактор файла functions.php
Поставете следният код, който ще добави специфичният CSS код в login хедъра:

<?
/**
 * @desc attach custom admin login CSS file
 */
function custom_login_css() { 

  echo '<link rel="stylesheet"  href="'.get_bloginfo('template_directory').'/inc/login.css" />';

}
add_action('login_head', 'custom_login_css');

?>

Сега вече може да предефинирате всички стилове, които искате. За примера аз ще използвам моят login screen:

.locale-bg-bg {
    background-color: #f7f7f7 !important;
    background-image: none !important;
    background-image: url('bg-5.jpg')  !important;
    background-repeat: no-repeat !important;
    background-position: 50% 0 !important;
    background-attachment: fixed !important;
}

#backtoblog{
	display:none !important;
	}

.login form {
    margin-top: 20px !important;
    padding: 16px 17px 18px !important;
    background: #fff !important;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13) !important;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,.13) !important;
}

.login #nav {
    margin: 10px 0 0 !important;
}
.login #backtoblog, .login #nav {
    padding: 0px !important;
}




#nav a {
	-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
	-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
	box-shadow:inset 0px -3px 7px 0px #29bbff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
	background-color:#2dabf9;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff !important;
	font-family:Arial;
	padding:2px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #263666;
}
#nav a:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
	background-color:#0688fa;
}
#nav a:active {
	position:relative;
	top:1px;
}
.login label {
    color: #000000 !important;
    font-size: 12px !important;
}
.wp-core-ui .button-primary {
	-moz-box-shadow:inset 0px 39px 0px -24px #e67a73 !important;
	-webkit-box-shadow:inset 0px 39px 0px -24px #e67a73 !important;
	box-shadow:inset 0px 39px 0px -24px #e67a73 !important;
	background-color:#e4685d !important;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #ffffff !important;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px !important;
	padding:6px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #b23e35 !important;
	
}
.wp-core-ui .button-primary:hover {
	background-color:#eb675e !important;
}
.wp-core-ui .button-primary:active {
	position:relative;
	top:1px;
}

#loginform p label #user_login, #loginform p label #user_pass { 
font-weight: normal;
padding: 8px 9px;
font-style: normal;
border-right-color: #dadada;
border-bottom-color: #dadada;
color: #999 !important;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
outline: none;
text-shadow: 0px 1px 0px #fff;
background-color: #fff;
background: -webkit-gradient(linear, left top, left bottombottom, from(#f9f9f9), to(#ffffff)) !important;
background: -webkit-linear-gradient(top, #f9f9f9, #ffffff) !important;  
background: -moz-linear-gradient(top,  #f9f9f9,  #ffffff) !important;
background: -ms-linear-gradient(top, #f9f9f9, #ffffff) !important;
background: -o-linear-gradient(top, #f9f9f9, #ffffff);
}

#loginform p label #user_login:focus, #loginform p label #user_pass:focus, #loginform p label #user_login:hover, #loginform p label #user_pass:hover { 
	color: #777 !important;
	background: #fff !important;
}

#loginform p label #user_login:-webkit-autofill, #loginform p label #user_pass:-webkit-autofill {
	background-color: #fff !important;
}

#login h1 { display: block; position: relative; height: 99px; margin-top: 10px; }
#login h1 a {
    background: #fff url('logo.png') no-repeat top center;
    display: block;
    position: relative;
    right: 55px;
    top: -50px;
    width: 419px;
    height: 160px;
}

Javascript и работа с Media Library на WordPress

  • 1
afilipov
четвъртък, 23 юни 2016 / Published in Wordpress

В примера по-долу извиквам Media Library на WordPress, чрез натискане на картинка.

<script>

function getmedia(ident){
	
    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked.
	
    j(function(){

        // Prevents the default action from occuring.
      //  e.preventDefault();

        // If the frame already exists, re-open it.
        if ( meta_image_frame ) {
            meta_image_frame.open();
            return;
        }

        // Sets up the media library frame
        meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
          //  title: meta_image.title,
         //   button: { text:  meta_image.button },
            library: { type: 'image' }
        });

        // Runs when an image is selected.
        meta_image_frame.on('select', function(){

          //  return false;

            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

            // Sends the attachment URL to our custom image input field.
			
					
	document.getElementById("imgc_"+ident).src = media_attachment.sizes.thumbnail.url;
			
        //media_attachment.id; 	имате и id-то на самият attachment (за повече опции, проверете в WordPress документацията)

			
        });

        // Opens the media library frame.
        meta_image_frame.open();
    });

	 
	 
	 
}

  </script>

Ето това са картинките, чрез които ще извикваме Media Library и ще заменяме src адреса.

<img src="smiley.gif" id="imgc_1" alt="Smiley face" height="42" width="42" onclick="getmedia('1');"></br>
<img src="smiley.gif" id="imgc_2" alt="Smiley face" height="42" width="42" onclick="getmedia('2');"></br>
<img src="smiley.gif" id="imgc_3" alt="Smiley face" height="42" width="42" onclick="getmedia('3');">
  • 1
  • 2
  • 3
  • 4

Търсене

Категории

  • CSS
  • SEO Оптимизация
  • WooCommerce
  • Wordpress
  • WordPress Модули
  • Код оптимизация
  • Трикове

Архиви

  • февруари 2026
  • юли 2020
  • юли 2018
  • февруари 2018
  • август 2017
  • март 2017
  • ноември 2016
  • октомври 2016
  • септември 2016
  • август 2016
  • юли 2016
  • юни 2016
  • май 2016
  • март 2016
  • юли 2012

AIT Web Design

Готови ли сте за нов уеб сайт?

  • Безплатна консултация
  • Индивидуален подход
  • Реални резултати
Безплатна консултация

Къде работим?

Работим с клиенти от цяла България и предлагаме професионална изработка на уеб сайтове и онлайн магазини. Имаме реализирани множество проекти в различни градове, като най-голям опит имаме в:

  • Изработка на сайт Хасково
  • Изработка на сайт Пловдив
  • Изработка на сайт София
  • Изработка на сайт Варна
  • Изработка на сайт Бургас

УСЛУГИ

  • Изработка на уеб сайт
  • Онлайн магазин
  • ОПТИМИЗАЦИЯ НА САЙТ
  • Поддръжка на WordPress сайт
  • ХОСТИНГ И ДОМЕЙН
  • Всички услуги

Последни публикации

  • Shipment 1 проблем с новият WooCommerce
  • WooCommerce премахване на потвърждението за изход
  • Добавяне на WooCommerce статус на поръчка
  • Филтриране на постове в администрацията на WordPress за период от време
  • WordPress полезни модули, стратегии и оптимизация за фирмен сайт

ВРЪЗКА С НАС

Работим с клиенти от цяла България
(+359) 888 898 797
Email: office@ait-webdesign.com

AIT WEB DESIGN
6300 Хасково, Ул. Хан Аспарух 9-11. България

Отвори в Google Maps

Връзки

Разгледайте нашите външни профили:

  • Фирмен профил на AIT Web Design в Infobel
  • Фирмен профил в Google
  • Facebook Page

Полезно

  • За нас
  • Портфолио
  • Магазин
  • Услуги
  • Референции
  • Запитване за оферта
  • Блог
  • КОНТАКТИ
  • Политика за защита на личните данни

Всички права запазени AIT WEB DESIGN 2026

НАГОРЕ