• اطلاعیه ها

    • Saeed Fard

      پوشش زنده وردکمپ ۲۰۱۸ اروپا توسط وردپرس پارسی   23/03/97

      اگر کاربر وردپرس هستید حتما تا به حال اسم وردکمپ رو شنیدید، کمپ و دورهمی بزرگ توسعه‌دهنده‌ها و کاربران وردپرس که سالانه در کشورهای مختلف برگزار میشه تحت عنوان وردکمپ هستش که از سمت مراجع اصلی وردپرس حمایت و برگزار می‌شه.   این‌ بار در سال 2018 وردکمپ اروپا در شهر بلگراد کشور صربستان در حال برگزاری هستش، این رویداد طی سه روز 24 تا 26 تیر ماه (June 14-16) برگزار میشه، در این رویداد مصطفی صوفی از وردپرس پارسی و به نمایندگی تمامی کاربران وردپرس فارسی حضور داره. وردپرس پارسی رویداد وردکمپ 2018 اروپا رو به صورت زنده توسط مصطفی پوشش می‌ده و در صورت علاقه‌مندی به این مراسم می‌تونید از طریق وردپرس پارسی دنبالش کنید.در حال حاضر یک روز از این مراسم گذشته که گزارش اون در قسمت پوشش زنده قرار گرفته. برای دنبال کردن مراسم وردکمپ اروپا به صورت لحظه‌ای به صفحه پوشش زنده در قسمت زیر مراجعه کنید. همینطور در آینده منتظر خبر برگزاری اولین وردکمپ در ایران توسط وردپرس‌پارسی باشید. https://wp-parsi.com/wceu-2018

      لینک خبر در وردپرس پارسی : https://wp-parsi.com/wceu-2018-live  
ایمان احمدی

ساخت فلش برای ورد پرس

23 پست در این موضوع قرار دارد

سلام

کسی هست اینجا بتونه یه عکس رو تبدیل به فلش کنه که هر قسمتش که میریم یه منو باز بشه و روی هر قسمت اون منو که کلیک میشه یه برگه از برگه های ورد پرس باز بشه؟؟؟

خیلی فوری هستش این پروژه

0

به اشتراک گذاری این پست


لینک به پست

خودتون هم میتونید با برنامه ها این کار انجام بدید

و آدرس مقصد وارد کنید در هر باتوم(دکمه)

1

به اشتراک گذاری این پست


لینک به پست

نیازی به فلش هم نیست می تونید با کدی شبیه این چیزی که می خواهید را بسازید


<map id="ImgMap0" name="ImgMap0">
<area alt="" coords="30, 100, 150, 180" href="post1" shape="rect" />
<area alt="" coords="100, 230, 230, 310" href="post2" shape="rect" />
<area alt="" coords="10, 230, 80, 350" href="post3" shape="rect" />
<area alt="" coords="150, 0, 240, 50" href="post4" shape="rect" />
</map><img height="360" src="img.jpg" usemap="#ImgMap0" width="240" />

7

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

سلام

همونطور که آقای فخار فرمودن شما فقط کافی هست از خاصیت ایمیج مپ استفاده کنید.

ابزارهای آنلاین برای آسون کردن کار ساخت ایمیج مپ:


http://www.maschek.hu/imagemap/
http://www.image-maps.com/PHP_Map_Image.php
http://www.kolchose.org/simon/ajaximagemapcreator

ویرایش شده در توسط sajjadnajafi
1

به اشتراک گذاری این پست


لینک به پست

فک کنم بد توضیح دادم

ببینین دوستان یه عکس دارم این عکس با تگ map و area تقسیم بندی شده و هر قسمتش یه لینک داره حالا من میخوام روی هر قسمت که موس میره یه باکس ایجاد بشه مثل کاری که title میکنه ولی یه باکس شکیل تر وقتی این باکس ظاهر شد حاوی چند تا لینک باشه یا یه سری توضیحات چند تا از دوستان گفتن با tooltip انجام بدم این کار رو کردم تو بخش ابزارک ظاهر نمیشه ولی تو فایل html میاد. من میخوام اینکار تو ابزارک انجام بشه.

امید وارم منظورمو رسونده باشم.

0

به اشتراک گذاری این پست


لینک به پست

باز هم نیازی به فلاش نیست شما باید tooltip را با جی کوئری بسازید و بجای تصویر از یک div با ابعاد تصویر و زمینه بک گراند تصویر استفاده کنید

2

به اشتراک گذاری این پست


لینک به پست

باز هم نیازی به فلاش نیست شما باید tooltip را با جی کوئری بسازید و بجای تصویر از یک div با ابعاد تصویر و زمینه بک گراند تصویر استفاده کنید

این اون فایل html است که با تولتیپ درست کردم به صورتی تکی کار میکنه ولی درون ابزارک خیر

tooltip wp-persia.html

0

به اشتراک گذاری این پست


لینک به پست

دوستان کسی نیست کمک کنه؟؟؟

0

به اشتراک گذاری این پست


لینک به پست

اسپم نديد

پاسخ شما ظرف 24 ساعت پاسخ داده خواهد شد

1

به اشتراک گذاری این پست


لینک به پست

خط 8 تا 18 کدهای tooltip.js را پاک کنید و بجای sidebar در کد زیر نام کلاس سایدبار خود را قرار دهید و جایگزین اون کدها کنید


$body = $('.sidebar'),
$el;
// Ensure chaining works
return this.each(function(i, el) {

$el = $(el).attr("data-tooltip", i);
// Make DIV and append to page
var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo(".sidebar");

به استایل ها هم بعد از همون اصلاح اضافه کنید


.sidebar {
position:relative;
overflow:visible
}

0

به اشتراک گذاری این پست


لینک به پست

خط 8 تا 18 کدهای tooltip.js را پاک کنید و بجای sidebar در کد زیر نام کلاس سایدبار خود را قرار دهید و جایگزین اون کدها کنید


$body = $('.sidebar'),
$el;
// Ensure chaining works
return this.each(function(i, el) {

$el = $(el).attr("data-tooltip", i);
// Make DIV and append to page
var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo(".sidebar");

به استایل ها هم بعد از همون اصلاح اضافه کنید


.sidebar {
position:relative;
overflow:visible
}

چطور می تونم نام کلاس سایدبار رو پیدا کنم؟؟؟

0

به اشتراک گذاری این پست


لینک به پست

اگر سایتتون http://www.osvehmedical.com/ است

کلاس سایدبارتون


dmweb-sidebar1

3

به اشتراک گذاری این پست


لینک به پست

در ضمن کد تول تیپ را اینطوری که الان گذاشتید نگذارید

بخش داخل


<style type="text/css">
</style>

را به فایل style.css قالب اضافه کنید

بخش


<script type="text/javascript" src="http://osvehmedical.com/jquery172.min.js"></script>
<!--[if !IE | (gt IE 8)]><!-->
<script src="http://osvehmedical.com/tooltips.js"></script>
<script>
$(function() {
$("#page-wrap area[title]").tooltips();
});
</script>
<!--<![endif]-->

به header.php و


<div align="right" id="page-wrap">
<img align="right" src="http://www.osvehmedical.com/wp-content/uploads/50--70--OSVE.png" width="229" height="605" usemap="#anatomi" />
<map name="anatomi">

<area shape="circle" coords="55,122,13" alt="Clavical"
href=http://www.osvehmedical.com/clavicle/
title="برای نمایش محصولات مربوط به کتف کلیک نمایید" target="_new" />
<area shape="rect" coords="171,123,198,189" alt="Humeral Shaft" title="برای نمایش محصولات بخش Humeral Shaft کلیک کنید" href=http://www.osvehmedical.com/humeral-shaft/ target="_new" />

<area shape="rect" coords="26,129,44,168" alt="Proximal Humerus" href=http://www.osvehmedical.com/proximal-humerus/ title="برای نمایش محصولاتproximal-humeru کلیک نمایید " target="_new" />
<area shape="rect" coords="180,202,206,248" alt="Distal Humerus" href=http://www.osvehmedical.com/distal-humerus-2/
title="برای نمایش محصولات Distal Humerus کلیک نمایید " target="_new" />
<area shape="rect" coords="206,239,224,278" alt="Proximal Redius" href=http://www.osvehmedical.com/proximal-redius/ title="برای نمایش محصولات Proximal Redius کلیک کنید"
target="_new"/>

<area shape="rect" coords="193,282,221,306" alt="Radial Shaft" href=http://www.osvehmedical.com/radial-shaft/ title="برای نمایش محصولات Radial Shaft کلیک کنید" target="_new"/>
<area shape="rect" coords="192,312,209,333" alt="Distal Radius" href=http://www.osvehmedical.com/distal-radius/ title="برای نمایش محصولات Distal Radius کلیک کنید" target="_new"/>
<area shape="rect" coords="60,288,104,308" alt="Pelvis" href=http://www.osvehmedical.com/pelvis/ title="برای نمایش محصولات Pelvis کلیک کنید" target="_new"/>
<area shape="rect" coords="133,302,160,368" alt="Proximal Femur" href=http://www.osvehmedical.com/proximal-femur/ title="برای نمایش محصولات Proximal Femur کلیک کنید" target="_new"/>
<area shape="rect" coords="44,308,68,389" alt="Femoral Shaft" href=http://www.osvehmedical.com/femoral-shaft/ title="برای نمایش محصولات Femoral Shaft کلیک کنید" target="_new"/>
<area shape="rect" coords="126,381,153,447" alt="Distal Femur" href=http://www.osvehmedical.com/distal-femur/ title="برای نمایش محصولات Distal Femur کلیک کنید" target="_new"/>
</map>
</div>

را به ابزارک متن سایدبار و


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

و


</head>
<body>

و


</body>
</html>

رو هم حذف کنید

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

اگر سایتتون http://www.osvehmedical.com/ است

کلاس سایدبارتون


dmweb-sidebar1

ممنون

فقط فایلی به نام tooltip.js ندارم دوتا فایل آپ کردم که نامهایشان :jquery.min.js و jquery172.min.js

کدوم یکی رو ادیت کنم؟

پیداش کردم

ویرایش شده در توسط ایمان احمدی
0

به اشتراک گذاری این پست


لینک به پست

متاسفانه تو بخش ابزارک کار نمیکنه مراحلی که رفتم به شکل زیر هستش:

1- این کد tooltip.js:


// IIFE to ensure safe use of $
(function( $ ) {
// Create plugin
$.fn.tooltips = function(el) {
var $tooltip,
$body = $('dmweb-sidebar1'),
$el;
// Ensure chaining works
return this.each(function(i, el) {
$el = $(el).attr("data-tooltip", i);
// Make DIV and append to page
var $tooltip = $('<div class="tooltip" data-tooltip="' + i + '">' + $el.attr('title') + '<div class="arrow"></div></div>').appendTo("dmweb-sidebar1");
// Position right away, so first appearance is smooth
var linkPosition = $el.position();
$tooltip.css({
top: linkPosition.top - $tooltip.outerHeight() - 25,
left: linkPosition.left - $tooltip.width() - 20
});
$el
// Get rid of yellow box popup
.removeAttr("title")
// Mouseenter
.hover(function() {
$el = $(this);
$tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']');
// Reposition tooltip, in case of page movement e.g. screen resize
var linkPosition = $el.position();
$tooltip.css({
top: linkPosition.top - $tooltip.outerHeight() - 25,
left: linkPosition.left - $tooltip.width() - 20
});
// Adding class handles animation through CSS
$tooltip.addClass("active");
// Mouseleave
}, function() {
$el = $(this);
// Temporary class for same-direction fadeout
$tooltip = $('div[data-tooltip=' + $el.data('tooltip') + ']').addClass("out");
// Remove all classes
setTimeout(function() {
$tooltip.removeClass("active").removeClass("out");
}, 300);
});
});
}
})(jQuery);

2- اینم کد header.php :


<?php global $wp_locale;
if (isset($wp_locale)) {
$wp_locale->text_direction = 'rtl';
} ?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset') ?>" />
<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
<!-- Created by Artisteer v4.1.0.59861 -->
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
<!--[if lt IE 9]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php
remove_action('wp_head', 'wp_generator');
if (is_singular() && get_option('thread_comments')) {
wp_enqueue_script('comment-reply');
}
wp_head();
?>
<script type="text/javascript" src="http://osvehmedical.com/jquery172.min.js"></script>
<!--[if !IE | (gt IE 8)]><!-->
<script src="http://osvehmedical.com/tooltips.js"></script>
<script>
$(function() {
$("#page-wrap area[title]").tooltips();
});
</script>
<!--<![endif]-->
</head>
<body <?php body_class(); ?>>
<div id="dmweb-main">
<?php if(theme_has_layout_part("header")) : ?>
<header class="dmweb-header<?php echo (theme_get_option('theme_header_clickable') ? ' clickable' : ''); ?>"><?php get_sidebar('header'); ?></header>
<?php endif; ?>
<nav class="dmweb-nav">
<div class="dmweb-nav-inner">
<?php
echo theme_get_menu(array(
'source' => theme_get_option('theme_menu_source'),
'depth' => theme_get_option('theme_menu_depth'),
'menu' => 'primary-menu',
'class' => 'dmweb-hmenu'
)
);
get_sidebar('nav');
?>
</div>
</nav>
<div class="dmweb-sheet clearfix">
<div class="dmweb-layout-wrapper">
<div class="dmweb-content-layout">
<div class="dmweb-content-layout-row">
<?php get_sidebar(); ?>
<div class="dmweb-layout-cell dmweb-content">

3- کد که در استایل پوسته گذاشتم:


.tooltip, .arrow:after {background: #000000;border: 2px solid #ffffff;}
.tooltip {
pointer-events: none;
opacity: 0;
display: inline-block;
position:relative;
padding: 5px 10px;
color: #ffffff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
margin-top:10px;
text-align: right;
font: 14px tahoma;
font-stretch: condensed;
text-decoration: none;
text-transform: none;
box-shadow: 0 0 7px black;
-webkit-box-shadow: 0 0 7px black;
-moz-box-shadow: 0 0 7px black;
}
.arrow {width: 70px;height: 16px;overflow: hidden;position: absolute;left: 50%;margin-left: -35px;bottom: -16px;}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-moz-box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
box-shadow: 6px 5px 9px -9px black,
5px 6px 9px -9px black;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.tooltip.active {
opacity: 1;
margin-top: 5px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.tooltip.out {opacity: 0;margin-top: -20px;}
#page-wrap {}


.dmweb-content-layout .dmweb-sidebar1
{
position:relative;
overflow:visible
-webkit-border-radius:20px 0 0;
-moz-border-radius:20px 0 0;
border-radius:20px 0 0;
border-left:1px solid #B4CCD0;
margin:0 auto;
width: 300px;
}

4-کدی که در ابزارک گذاشتم:


برای نمایش محصولات هر بخش روی قسمتهای مشخص شده کلیک نمایید.

<div align="right" id="page-wrap">
<img align="right" src="http://www.osvehmedical.com/wp-content/uploads/50--70--OSVE.png" width="229" height="605" usemap="#anatomi" />
<map name="anatomi">

<area shape="circle" coords="55,122,13" alt="Clavical"
href=http://www.osvehmedical.com/clavicle/
title="برای نمایش محصولات مربوط به کتف کلیک نمایید" target="_new" />
<area shape="rect" coords="171,123,198,189" alt="Humeral Shaft" title="برای نمایش محصولات بخش Humeral Shaft کلیک کنید" href=http://www.osvehmedical.com/humeral-shaft/ target="_new" />

<area shape="rect" coords="26,129,44,168" alt="Proximal Humerus" href=http://www.osvehmedical.com/proximal-humerus/ title="برای نمایش محصولاتproximal-humeru کلیک نمایید " target="_new" />
<area shape="rect" coords="180,202,206,248" alt="Distal Humerus" href=http://www.osvehmedical.com/distal-humerus-2/
title="برای نمایش محصولات Distal Humerus کلیک نمایید " target="_new" />
<area shape="rect" coords="206,239,224,278" alt="Proximal Redius" href=http://www.osvehmedical.com/proximal-redius/ title="برای نمایش محصولات Proximal Redius کلیک کنید"
target="_new"/>

<area shape="rect" coords="193,282,221,306" alt="Radial Shaft" href=http://www.osvehmedical.com/radial-shaft/ title="برای نمایش محصولات Radial Shaft کلیک کنید" target="_new"/>
<area shape="rect" coords="192,312,209,333" alt="Distal Radius" href=http://www.osvehmedical.com/distal-radius/ title="برای نمایش محصولات Distal Radius کلیک کنید" target="_new"/>
<area shape="rect" coords="60,288,104,308" alt="Pelvis" href=http://www.osvehmedical.com/pelvis/ title="برای نمایش محصولات Pelvis کلیک کنید" target="_new"/>
<area shape="rect" coords="133,302,160,368" alt="Proximal Femur" href=http://www.osvehmedical.com/proximal-femur/ title="برای نمایش محصولات Proximal Femur کلیک کنید" target="_new"/>
<area shape="rect" coords="44,308,68,389" alt="Femoral Shaft" href=http://www.osvehmedical.com/femoral-shaft/ title="برای نمایش محصولات Femoral Shaft کلیک کنید" target="_new"/>
<area shape="rect" coords="126,381,153,447" alt="Distal Femur" href=http://www.osvehmedical.com/distal-femur/ title="برای نمایش محصولات Distal Femur کلیک کنید" target="_new"/>
</map>
</div>

بازم ممنون که راهنمایی میکنی

0

به اشتراک گذاری این پست


لینک به پست

شاید تداخل جی کوئری داشته باشه کدی که در header.php گذاشتید را بردارید و به ابتدای کد داخل ابزارک اضافه کنید و تست بگیرید

2

به اشتراک گذاری این پست


لینک به پست

استاد جی کوئری ها تداخل نداره - مشکل از اینه که jquery172 همون جی کوئری 1.7.2 هستش با این تفاوت که من برای پلت های شخصی خودم خیلی شخصی سازیش کردم

1

به اشتراک گذاری این پست


لینک به پست

شاید تداخل جی کوئری داشته باشه کدی که در header.php گذاشتید را بردارید و به ابتدای کد داخل ابزارک اضافه کنید و تست بگیرید

بازم مشکل حل نشد

لازمه بهتون دسترسی بدم چک کنید؟؟؟؟

استاد جی کوئری ها تداخل نداره - مشکل از اینه که jquery172 همون جی کوئری 1.7.2 هستش با این تفاوت که من برای پلت های شخصی خودم خیلی شخصی سازیش کردم

خوب اگه امکان داره بگین چطور باید درستش کنم؟؟؟

0

به اشتراک گذاری این پست


لینک به پست

بازم مشکل حل نشد

لازمه بهتون دسترسی بدم چک کنید؟؟؟؟

خوب اگه امکان داره بگین چطور باید درستش کنم؟؟؟

tooltip wp-persia.html

امتحان کنید

1

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

tooltip wp-persia.html

امتحان کنید

مرسی مشکلم حل شد.

فقط میتونم سوال کنم مشکل چی بود و چطوری حل شد؟؟؟آخه ظاهرا یه طوری دیگه شما رفتین جلو و کلا دیگه از تگ map و area استفاده نکردین

ویرایش شده در توسط ایمان احمدی
0

به اشتراک گذاری این پست


لینک به پست

تگ map یک کم قدیمیه من از div استفاده کردم

باقیش هم از خوندن کدها به دستتون می آد

1

به اشتراک گذاری این پست


لینک به پست

تگ map یک کم قدیمیه من از div استفاده کردم

باقیش هم از خوندن کدها به دستتون می آد

2سوال آخر:

با این روش دیگر احتیاج به اون فایل های جی کوئری نیست؟؟؟

اگر بخواهم به جای اینکه او توضیحات بیاد وقتی موس میره رو بخش ها مورد نظر چندتا لینک بیاد. آیا میشه؟؟؟

0

به اشتراک گذاری این پست


لینک به پست

نه به جی کوئری احتیاجی نداره

برای اینکه لینک بیاد باید در کدها تغییراتی بدید یعنی لینک های فعلی را به div تبدیل کنید و بعد جایی که توضیحات فعلی است رو لینک بگذارید

البته با توجه به فضای کمی که داره اینکار ممکنه خیلی جالب نباشه

2

به اشتراک گذاری این پست


لینک به پست