Tento widget slouží k automatickému zobrazení veřejné IP adresy návštěvníka přímo na stránce. Po načtení stránky se v bloku zobrazí text „Vaše IP adresa:“ a vedle něj aktuální IP adresa uživatele. Celé řešení je navržené pro vložení do HTML widgetu v Elementor Pro, přičemž stylování je oddělené v samostatném CSS, takže lze snadno upravovat vzhled bez zásahu do samotné funkce.
Výhodou tohoto řešení je jednoduchost a přehlednost. Návštěvník ihned vidí svou IP adresu bez nutnosti otevírat systémová nastavení nebo externí služby. Widget se tak hodí například pro technické blogy, návody, stránky zaměřené na sítě, správu webu, bezpečnost nebo diagnostiku připojení.
Po načtení stránky JavaScript automaticky odešle požadavek na externí službu, která vrátí veřejnou IP adresu návštěvníka. Tato hodnota se následně vypíše do připraveného HTML prvku. Pokud se IP adresu nepodaří načíst, zobrazí se náhradní text, například „nelze zjistit“. Díky tomu widget nepůsobí rozbitě ani v případě, že je externí volání blokováno.
Součástí řešení je také možnost kopírování IP adresy přímo kliknutím na zobrazené číslo. Uživatel tak nemusí adresu ručně označovat. Po najetí myší se navíc zobrazí tooltip s informací „Kopírovat IP adresu“, takže je funkce intuitivní i pro běžného návštěvníka.
Widget pro zobrazení IP adresy je tvořen dvěma hlavními částmi — HTML a JavaScript. Každá z nich má jinou roli, ale dohromady zajišťují plnou funkčnost a uživatelský komfort.
HTML představuje základní strukturu widgetu. Vytváří vizuální prvek na stránce, který obsahuje popisek „Vaše IP adresa:“ a místo, kam se následně zobrazí samotná IP adresa. HTML také definuje interaktivní prvek, na který může uživatel kliknout, a připravuje prostor pro tooltip a další doplňkové informace.
Jednoduše řečeno:
HTML určuje, co se na stránce zobrazí a jak je widget uspořádán.
JavaScript zajišťuje samotnou funkčnost widgetu. Po načtení stránky automaticky zjistí veřejnou IP adresu návštěvníka, vloží ji do připraveného HTML prvku a umožní její okamžité zkopírování do schránky kliknutím myší nebo pomocí klávesnice. Současně se stará o zobrazení krátké zpětné vazby uživateli, například informace, že byla IP adresa úspěšně zkopírována.
Jednoduše řečeno:
JavaScript určuje, co se má stát a jak widget reaguje na akce uživatele.
Tato kombinace technologií umožňuje vytvořit jednoduchý, přehledný a praktický nástroj, který lze snadno vložit do webu například pomocí HTML widgetu v Elementor Pro.
Vaše IP adresa:
zjišťuji…
Následně po vložení si prosím doplňkové informace vymažte.
fetchSTimeoutem()Funkce fetchSTimeoutem() slouží k načtení dat z externí služby s časovým limitem. Jejím úkolem je zajistit, aby widget nečekal na odpověď příliš dlouho. Pokud server neodpoví v nastaveném čase, požadavek se automaticky ukončí. Díky tomu se widget nezasekne ve stavu načítání a může případně zkusit jiný zdroj nebo zobrazit chybovou hlášku.
Velkou výhodou widgetu je samostatné CSS. Díky tomu lze jednoduše měnit například:
To znamená, že widget lze bez problémů přizpůsobit jak technickému blogu, tak moderním firemním stránkám nebo minimalistickému designu.
/* BOX S IP ADRESOU – základní vzhled */
.moje-ip .ip-box{
background: #f5f7fb !important; /* pozadí boxu */
color: #222222 !important; /* základní barva textu v boxu */
border: 2px solid #0a2a66 !important; /* obrys boxu */
border-radius: 12px !important; /* zaoblení */
padding: 14px 16px !important; /* vnitřní odsazení */
font-size: 18px !important; /* velikost písma (PC) */
line-height: 1.35;
font-weight: 500;
display: inline-flex;
gap: 10px;
align-items: baseline;
box-sizing: border-box;
}
/* Popisek "Vaše IP adresa:" */
.moje-ip .ip-label{
font-weight: 500;
color: inherit;
}
/* IP ADRESA – RÁMEČEK BEZ ANIMACE
- hover (myš) → rámeček
- focus (myš i klávesnice) → rámeček
*/
/* Základ – zaoblení rohů */
.moje-ip .ip-copy{
border-radius: 1px;
}
/* Hover – myš */
.moje-ip .ip-copy:hover{
outline: 2px solid blue;
outline-offset: 1px;
}
/* Focus – myš i klávesnice */
.moje-ip .ip-copy:focus,
.moje-ip .ip-copy:focus-visible{
outline: 1px solid blue;
outline-offset: 5px;
}
/* IP – klikací prvek
- výchozí barva je normální (dědí z boxu)
- tmavě modrá je pouze na hover */
.moje-ip .ip-copy{
position: relative; /* kvůli tooltipu */
cursor: pointer;
color: inherit !important; /* VÝCHOZÍ: není modrá, zdědí se (černá) */
text-decoration: underline; /* ať je jasné, že je klikací */
font-weight: 700;
outline: none;
word-break: break-word;
}
/* HOVER: tmavě modrá až při najetí */
.moje-ip .ip-copy:hover{
color: blue !important; /* tmavě modrá na hover */
}
/* Efekt po zkopírování */
.moje-ip .ip-copy.ip-copied{
transform: scale(1.02);
}
/* Deaktivace při chybě */
.moje-ip .ip-copy--disabled{
cursor: not-allowed;
opacity: 0.7;
text-decoration: none;
}
/* Tooltip – bere text z data-tooltip */
.moje-ip .ip-copy[data-tooltip]::after{
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%);
background: #0f172a;
color: #ffffff;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
line-height: 1.2;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 9999;
}
.moje-ip .ip-copy[data-tooltip]::before{
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #0f172a transparent transparent transparent;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
z-index: 9999;
}
/* Tooltip se ukáže při hover nebo focus */
.moje-ip .ip-copy:hover::after,
.moje-ip .ip-copy:hover::before,
.moje-ip .ip-copy:focus::after,
.moje-ip .ip-copy:focus::before{
opacity: 1;
}
/* Skrytý status pro čtečky */
.moje-ip .ip-sr{
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Responzivní úpravy */
@media (max-width: 1024px){
.moje-ip .ip-box{
font-size: 16px !important;
padding: 12px 14px !important;
}
}
@media (max-width: 767px){
.moje-ip .ip-box{
font-size: 15px !important;
padding: 12px 12px !important;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
}
Zobrazení IP adresy na webové stránce není jen „efekt pro parádu“. I když se na první pohled může zdát jako jednoduchá informativní funkce, v praxi má reálné využití jak technické, tak bezpečnostní.
Na základní úrovni pomáhá návštěvníkovi rychle zjistit svou veřejnou IP adresu, což je užitečné například při nastavování routeru, vzdáleného přístupu, VPN nebo při komunikaci s technickou podporou. Uživatel tak nemusí hledat externí služby a má potřebnou informaci ihned k dispozici.
Z pohledu bezpečnosti může mít zjišťování IP adresy také praktický význam. Administrátoři webu nebo systémů ji mohou využít například pro:
Je však důležité dodat, že samotné zobrazení IP adresy uživatele není bezpečnostní ochranou. Jde spíše o podpůrnou informaci, která může být součástí širšího bezpečnostního řešení. Skutečná ochrana systému vždy vyžaduje kombinaci dalších opatření, jako je autentizace, šifrování, firewall nebo monitorování provozu.
Shrnutí:
Zjišťování IP adresy není jen vizuální doplněk. Je to jednoduchý, ale užitečný nástroj, který může pomoci při správě sítí, řešení technických problémů a v určitých situacích i při zvyšování bezpečnosti webových služeb.
Namísto toho, aby každý widget volal API samostatně, můžete provést jedno volání API a data sdílet mezi widgety. Tuto možnost zde ale popisovat dnes nebudeme. Já zvolil pro mě jednodušší způsob podle řešení č. 1.
Vložení Widgetů jako informace o počasí může být zajímavým doplňkem, který může zatraktivnit Vaše stránky.
Návštěvníkovi pak podat i zajímavou a relevantní informaci.
A opět lehkou úpravou kódu si můžete celý Widget upravit podle Vašich představ, tak, aby vše korespondovalo s Vaší prezentací.
Tak ať se Vám daří při tvorbě webu!
Abychom poskytli co nejlepší služby, používáme k ukládání a/nebo přístupu k informacím o zařízení, technologie jako jsou soubory cookies. Souhlas s těmito technologiemi nám umožní zpracovávat údaje, jako je chování při procházení nebo jedinečná ID na tomto webu. Nesouhlas nebo odvolání souhlasu může nepříznivě ovlivnit určité vlastnosti a funkce. Bear Hugs s.r.o.